AngularJS ng-change Directive
AngularJS 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>
angular.module('myApp', []).controller('myCtrl', ['$scope',
function($scope) { $scope.count = 0;
$scope.myFunc = function() {
$scope.count++; };}]);
</script></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 an ng-model directive to be present.
The AngularJS ng-change directive does 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 each change in the value, it does not wait for the complete change process or a blur event.
The ng-change event is only evaluated when a change in the input value causes a new value to be committed (genuine changes).
Syntax
Supported by <input>, <select>, and <textarea> elements.
Parameter Values
| Value | Description |
|---|---|
| expression | Expression to be executed when the element's value changes. |