AngularJS ng-change Directive
Example
Execute a function when the value of the input field changes:
<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>
<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++;
};
}]);
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>
</body>
Definition and Usage
The ng-change directive tells AngularJS what to do when the
value of an HTML element changes.
The ng-change directive requires a ng-model
directive to be present.
The ng-change directive from AngularJS will not override the element's original onchange event,
both the ng-change expression and the original onchange event will be executed.
The ng-change event is triggered at every change in the value.
It will not wait until all changes are made, or when the input field loses
focus.
The ng-change event is only triggered if there is a actual
change in the input value, and not if the change was made from a JavaScript.
Syntax
<element ng-change="expression"></element>
Supported by <input>, <select>, and <textarea>.
Parameter Values
| Value | Description |
|---|---|
| expression | An expression to execute when an element's value changes. |