Angularjs ng-change Instruction
Angularjs instance
Executes 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>
Run Result:
Enter some information in the input box:
The input box has been modified 0 times.
Definitions and usage
The ng-change directive is used to tell angularjs what action needs to be performed when the value of an HTML element changes.
Ng-change instructions need to be used with ng-model instructions.
The Angularjs ng-change instruction instruction does not overwrite the native onchange event, and if the event is triggered, the ng-change expression is executed with the native onchange event.
The Ng-change event is triggered each time a value changes, and it does not need to wait for a completed modification or wait for the action to lose focus.
The Ng-change event is modified only for real changes to the value of the input box, not through JavaScript.
Grammar
<element ng-change= "expression" ></element>
<input>, <select>, and <textarea> element support.
Parameter values
value |
Description |
Expression |
Executes an expression when the value of the element changes. |
The above is the Angularjs ng-change instruction of knowledge collation, follow-up continue to add.