Skip to content Skip to sidebar Skip to footer

Angular - Ng-change Not Firing When Ng-model Is Changed

The input is the following: The action() is executed when I manually type and change the input. However if

Solution 1:

ngChange is just for the input, if you want to listen the model do like this

$scope.$watch('repair.test', function(newvalue,oldvalue) {

            });

Solution 2:

The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.

It will not be evaluated:

  • if the value returned from the $parsers transformation pipeline has not changed
  • if the input has continued to be invalid since the model will stay null
  • if the model is changed programmatically and not by a change to the input value

Try to create a watcher using $scope.$watch - $watch(watchExpression, listener, [objectEquality]);

Example

$scope.$watch('repair.test', function(newValue, oldValue) {
    // ...
});

Solution 3:

You can use a watcher-function in your controller

$scope.$watch('repair.test', function() {
    $scope.action();
});

Solution 4:

Another solution would be to use a directive that watched the model for any changes instead of using ng-change.

app.directive('onModelChange', function($parse){
    return {
        restrict: "A",
        require: "?ngModel",
        link: function(scope, elem, attrs, ctrl) {
            scope.$watch(attrs['ngModel'], function (newValue, oldValue) {
                if (typeof(newValue) === "undefined" || newValue == oldValue) {
                    return;
                }
                var changeExpr = $parse(attrs['onModelChange']);
                if (changeExpr) {
                    changeExpr(scope);
                }
            });
        } 
    };
});

Then you would use it like so:

<inputclass="value"type="text"ng-model="myVar"on-model-change="doSomething(myVar)"/>

Post a Comment for "Angular - Ng-change Not Firing When Ng-model Is Changed"