AngularJS: API: ng/directive/ngChange


ngChange

  1. - directive in module ng

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 expression is not evaluated when the value change is coming from the model.

Note, this directive requires ngModel to be present.

Directive Info

  • This directive executes at priority level 0.

Usage

  • as attribute: 
    <input
  ng-change="">
...
</input>

Arguments

ParamTypeDetails
ngChangeexpression

Expression to evaluate upon change in input value.

Example

index.html
<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>
protractor.js
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');});