Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).
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:
$parsers
transformation pipeline has not changednull
Note, this directive requires ngModel
to be present.
<input
ng-change="expression">
...
</input>
Param | Type | Details |
---|---|---|
ngChange | expression |
Expression to evaluate upon change in input value. |
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
<input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
<label for="ng-change-example2">Confirmed</label><br />
<tt>debug = {{confirmed}}</tt><br/>
<tt>counter = {{counter}}</tt><br/>
</div>
var counter = element(by.binding('counter'));
var debug = element(by.binding('confirmed'));
it('should evaluate the expression if changing from view', function() {
expect(counter.getText()).toContain('0');
element(by.id('ng-change-example1')).click();
expect(counter.getText()).toContain('1');
expect(debug.getText()).toContain('true');
});
it('should not evaluate the expression if changing from model', function() {
element(by.id('ng-change-example2')).click();
expect(counter.getText()).toContain('0');
expect(debug.getText()).toContain('true');
});