This article mainly introduces the summary of AngularJs ng-change events/commands. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Definition and Usage
The ng-change directive is used to tell AngularJS what to do when the value of an HTML element changes.
The ng-change directive needs to be used with the ng-model directive.
AngularJS ng-change directive will not override the native onchange event. If this event is triggered, both the ng-change expression and the native onchange event will be executed.
ng-change event is triggered every time the value changes, it does not need to wait for a completed modification process, or wait for the action to lose focus.
ng-change event is only for actual modification of the input box value, not modification through JavaScript.
Syntax
<element ng-change="expression"></element>
,
Parameter value
Value | Description |
---|---|
expression | Execute expression when the element value changes. |
Example description: Execute function when the value of the input box changes:
<body ng-app="myApp"> <p ng-controller="myCtrl"> <input type="text" ng-change="myFunc()" ng-model="myValue" /> <p>The input field has changed {{count}} times.</p> </p> <script> angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.count = 0; $scope.myFunc = function() { $scope.count++; }; }]); </script> </body>
Example description, radio and checkbox
Note: checkbox ng-model is always true or false, not value. Other ng-models default to the value of value
HTML
<h3>Radio 控件测试</h3> <p><label> <input type="radio" value="男" name="sex" ng-model="value1" ng-change="radioChecked()" /> 男 </label> <label> <input type="radio" value="女" name="sex" ng-model="value1" ng-change="radioChecked()" /> 女 </label></p> <h3>checked 控件测试</h3> <p><p class="checkbox"> <label> <input name="agree" type="checkbox" value="同意" ng-model="value2" ng-change="checkboxClick()" /> 同意协议 </label> </p> <p class="checkbox"> <label> <input name="agree" type="checkbox" value="同意2" ng-model="value2" ng-change="checkboxClick()" /> 同意协议2 </label> </p></p>
JS:
var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope) { //randio ng-change事件和原始onchange相同 //radio ng-model 的值是value $scope.radioChecked = function () { console.info($scope.value1); } //checkbox ng-change事件和原始onchange相同 //checkbox ng-model总是是true或false $scope.checkboxClick = function () { console.info($scope.value2); } });
Example description , text, select
HTML
<form class="form-horizontal"> <p class="form-group"> <label class="control-label">姓名:</label> <input type="text" class="form-control" ng-model="name" ng-change="txtChange();" /> </p> <p class="form-group"> <label class="control-label">选择年级:</label> <select class="form-control" ng-change="selectChange();" ng-model="grade"> <option value="1">一年级</option> <option value="2">二年级</option> </select> </p> </form>
JS
var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope) { //textbox 的ng-change事件和原始ng-change不相同,而是和$scope.$watch()监听相同 //textbox 的ng-model为当前输入框的内容,为value值 $scope.txtChange = function () { console.info($scope.name); } //select 的ng-change事件和原始ng-change相同 //ng-model 的默认情况下ng-model的结果为value值 $scope.selectChange = function () { console.info($scope.grade); } });
Related recommendations:
Tutorial on the method of controller inheritance in AngularJS
AngularJs Ultimate Shopping Cart Implementation Method
About the implementation of the star rating system of Angularjs rendering using directive
The above is the detailed content of About AngularJs ng-change event/directive usage. For more information, please follow other related articles on the PHP Chinese website!