ngChange is called when model changed programmatically

Question

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.

Hm, it might be something weird with the way the `ng-select` is intializing. The `ng-change` works as expected and does not fire when the dropdown value is changed programmatically after intialization. I've made [a fiddle](http://jsfiddle.net/twn347d3/) based on your demo. — ryanyuyu, Jun 15 '15 at 13:31
Hello, I'm facing the same kind of issue in another context when changing programmatically the model with values collected through an HTTP request (see link below). Did you find a solution or did you declare the bug to the Angular JS team in GitHub ? TIA. [See here](http://stackoverflow.com/questions/31464323/setting-scope-mymodel-element-with-ng-change-enters-in-infinite-loop). — l_r, Jul 18 '15 at 13:26
We removed track by and added additional property to options during init phase. — divide by zero, Jul 20 '15 at 12:27
This issue happends only when you set NULL to your ng-model, kTT's answer solved this issue nicely. — Marek Pavelek, Dec 04 '15 at 07:29

score 17 · Answer 1 · answered Jun 15 '15 at 13:53

17

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.

answered Jun 15 '15 at 13:53

kTT

1,340
11
19

2

This sould be marked as correct answer because you are not forced to modify function that is called by ng-change. Thank you! – Marek Pavelek Dec 04 '15 at 07:26

score 4 · Answer 2 · answered Jun 15 '15 at 13:38

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";
    }
}

sambomartin · Accepted Answer · 2015-06-15T13:47:48.273

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

score 0 · Answer 4 · answered Jun 15 '15 at 13:35

0

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

answered Jun 15 '15 at 13:35

Shubham Nigam

3,844
19
32

4

That's not an answer for that question. – kTT Jun 15 '15 at 13:38

ngChange is called when model changed programmatically

4 Answers4

Linked