AngularJS ng-change Directive

AngularJS Reference Manual

Definition and Usage

ng-change The directive tells AngularJS what operation to perform when the value of the HTML element changes.

ng-change The directive requires the existence of ng-model Directive

Directive in AngularJS ng-change The directive does not override the original onchange event of the element,ng-change Both the expression and the original onchange event will be executed.

ng-change The event is triggered each time the value changes. It does not wait until all changes are completed, or when the input box loses focus, to trigger.

ng-change The event is triggered only when the input value actually changes, not through JavaScript changes.

Example

When the value of the input box changes, execute a function:

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <input type="text" ng-change="myFunc()" ng-model="myValue" />
    <p>The input field has changed {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    $scope.myFunc = function() {
        $scope.count++;
    });
});
</script>
</body>

Try It Yourself

Syntax

<element ng-change="expression</element>

Support <input>、<select> and <textarea>.

Parameters

Parameters Description
expression Expression to be executed when the value of the element changes.

AngularJS Reference Manual