ngChange is called when model changed programmatically

问题

I have a problem when angular's ng-change is called when model is changed programmatically.

$scope.sendMessage = function() {
    $scope.message = "Message sent";
}

$scope.confirmed = true;
$scope.mySelectBox = $scope.selects[1];

<select ng-model="mySelectBox"
        ng-options="item.name for item in selects track by item.name"
        ng-change="sendMessage()">
</select>

Here is code example: http://plnkr.co/edit/R4MO86ihMrauHXhpCMxi?p=preview

Message should be null, because sendMessage shouldn't be called. Model is changed programmatically.

回答1:

According to docs, you're right.

https://docs.angularjs.org/api/ng/directive/ngChange

but this seems to be a bug caused by the order in which the events are hooked up

The best way round it - with resorting to js handler (onchange)

$scope.$watch("mySelectBox", function(a,b) {
    if (a.name!=b.name) {
       $scope.message = "Message sent! (old="+b.name+', new='+a.name+')';
    }
  });

See plunk http://plnkr.co/edit/2ZbxS1tszppR9SrNqxVB?p=preview

HTH

回答2:

You can try with ngModelOptions. See this plunker for reference http://plnkr.co/edit/BdKx62RW5Ls2Iz1H3VR1?p=preview.

In my example I used ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }" and it seems to work. It only runs function provided in ngChange when I change the selection. On initialize phase message stays empty.

回答3:

The ng-change callback is changed on each model change, and it treats the initial setup as such change. What you might want to do is to run desired code only after user interacts with it. You can check the $touched property of the field:

<form name="exampleForm" ng-controller="ExampleController">
  <select ng-model="mySelectBox" name="mySelectBox"
          ng-options="item.name for item in selects track by item.name"
          ng-change="sendMessage()">
  </select>
  <p>message = {{message}}</p>
</form>


$scope.sendMessage = function() {
    if ($scope.exampleForm.mySelectBox.$touched) {
        $scope.message = "Message sent";
    }
}

回答4:

You are providing value to model in controller ,so whenever you will set value of model which is matching with list it will call ng-change:

See updated plunker: http://plnkr.co/edit/f3xGmKesLFbzti56WLyH?p=preview

来源：https://stackoverflow.com/questions/30846190/ngchange-is-called-when-model-changed-programmatically

标签

angularjs

angularjs-ng-change