This article introduces the summary of AngularJs ng-change event/instruction, share it with everyone, and leave a note for yourself
Definition and usage
The ng-change directive is used to tell AngularJS what to do when HTML element values change.
The ng-change instruction needs to be used with the ng-model instruction.
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.
- <radio>,<checkbox>
Parameter value
| value | describe |
|---|---|
| expression | Execute expressions when element values change. |
Example description: Execute function when the value of the input box 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>
('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$ = 0;
$ = function() {
$++;
};
}]);
</script>
</body>
Example description, radio and checkbox
Note: checkbox ng-model is always true or false, not value, and other ng-models are valued by default
HTML
<h3>Radio Control Testing</h3> <p><label> <input type="radio" value="male" name="sex" ng-model="value1" ng-change="radioChecked()" /> male </label> <label> <input type="radio" value="female" name="sex" ng-model="value1" ng-change="radioChecked()" /> female </label></p> <h3>checked Control Testing</h3> <p><div class="checkbox"> <label> <input name="agree" type="checkbox" value="agree" ng-model="value2" ng-change="checkboxClick()" /> Agree to the agreement </label> </div> <div class="checkbox"> <label> <input name="agree" type="checkbox" value="Agree 2" ng-model="value2" ng-change="checkboxClick()" /> Agree to the agreement2 </label> </div></p>
JS：
var app = ('myApp', []);
('validateCtrl', function ($scope) {
//randio ng-change event is the same as the original onchange //The value of radio ng-model is value $ = function () {
($scope.value1);
}
//checkbox ng-change event is the same as the original onchange //checkbox ng-model is always true or false $ = function () {
($scope.value2);
}
});
Example description, text, select
HTML
<form class="form-horizontal"> <div class="form-group"> <label class="control-label">Name：</label> <input type="text" class="form-control" ng-model="name" ng-change="txtChange();" /> </div> <div class="form-group"> <label class="control-label">Choose a grade：</label> <select class="form-control" ng-change="selectChange();" ng-model="grade"> <option value="1">First grade</option> <option value="2">Second grade</option> </select> </div> </form>
JS
var app = ('myApp', []);
('validateCtrl', function ($scope) {
//The ng-change event of textbox is different from the original ng-change, but is the same as the $scope.$watch() listening //The ng-model of textbox is the content of the current input box and is the value value $ = function () {
($);
}
//The ng-change event of select is the same as the original ng-change //The result of ng-model is a value value by default $ = function () {
($);
}
});
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.