AngularJS ng-change directive
AngularJS instance
Execute the function when the value of the input box changes:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="myApp"><div ng-controller="myCtrl"> <p>Enter some information in the input box:</p> <input type="text" ng-change="myFunc()" ng-model="myValue" /> <p>The input box has been modified {{count}} times. </p></div><script> angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.count = 0; $scope.myFunc = function() { $scope.count++; }; }]);</script></body></html>Running results:
Enter some information in the input box:
The input box has been modified 0 times.
Definition and usage
The ng-change directive is used to tell AngularJS what to do when HTML element values change.
The ng-change command needs to be used with the ng-model command.
AngularJS ng-change directive directive does not overwrite the native onchange event. If this event is triggered, the ng-change expression and the native onchange event will be executed.
The ng-change event is fired every time the value changes, and it does not need to wait for a completed modification process or wait for an action that loses focus.
The ng-change event is only for the real modification of the input box value, not through JavaScript.
grammar
<element ng-change="expression"></element>
<input>, <select>, and <textarea> elements are supported.
Parameter value
| value | describe |
|---|---|
| Expression | Execute expressions when element values change. |
The above is a summary of the knowledge of AngularJS ng-change directives, and will be supplemented later.