I have something like this in my template:

<input name="searchText" placeholder="Search" data-type="search" 
       ng-model="searchText" 
       ng-change="searchRecords()" 
       ng-keyup="onKeyUp()">

When I get to that template, searchRecords() function is called (ng-change is fired). I want searchRecords() to be called only when I start typing (change searchText will fire ng-change). Right now it is fired with the controller initialization.

I tried to set searchText to null, '' in the controller but it was the same.

Is this behavior by design or I am missing something?

EDIT:

I realized that this code fires my searchRecords():

$scope.$watchGroup(['daysBefore', 'daysAhead'], function (newValues, oldValues, scope) { ... }

EDIT:

I deleted the ng-change and added this:

$scope.$watch('searchText', function (newValue, oldValue) {
                $scope.searchRecords();
            });

Without any change of the $scope.searchText this code is executing on controller initialization.

I have something like this in my template:

<input name="searchText" placeholder="Search" data-type="search" 
       ng-model="searchText" 
       ng-change="searchRecords()" 
       ng-keyup="onKeyUp()">

When I get to that template, searchRecords() function is called (ng-change is fired). I want searchRecords() to be called only when I start typing (change searchText will fire ng-change). Right now it is fired with the controller initialization.

I tried to set searchText to null, '' in the controller but it was the same.

Is this behavior by design or I am missing something?

EDIT:

I realized that this code fires my searchRecords():

$scope.$watchGroup(['daysBefore', 'daysAhead'], function (newValues, oldValues, scope) { ... }

EDIT:

I deleted the ng-change and added this:

$scope.$watch('searchText', function (newValue, oldValue) {
                $scope.searchRecords();
            });

Without any change of the $scope.searchText this code is executing on controller initialization.

• javascript
• angularjs
• angularjs-ng-change

• What does the controller look like? – Christian Phillips Commented Feb 12, 2015 at 12:34
• You may be calling searchRecords() in your controller – morsor Commented Feb 12, 2015 at 12:38
• initialize $scope.searchText=""; in controller then try. – Nitu Bansal Commented Feb 12, 2015 at 13:27

4 Answers 4

You may use ng-init to set a flag, for example:" ng-init='initializing=true' ", and check within the ng-change function

You don't need to use ng-change you can create the watcher for ng-model of that input.

$scope.$watch(function() {
  return $scope.searchText;
}, function(n, o) {
  if(n != o){
    $scope.searchRecords();
  }		
}, true);

<input ng-model="searchText">

Cheers

If you have a ng-model, then it is normal to have a ng-change event. You should do a $watch of the $scope.searchText var instead.

I found a thread about that in a google group for angular - https://groups.google./forum/#!topic/angular/uXldMqsQvRw

The watch fires automatically (and asynchronously via $evalAsync) upon registration, this is initialize the watcher and let your code know what the initial value is.

If this is undesirable then you can put this check into your save method:

function save(newVal, oldVal) { if (newVal === oldVal) return; // do stuff here }

So yeah, I wanted to get away from such code, but obviously I can't