大佬教程收集整理的这篇文章主要介绍了AngularJs ng-change事件/指令,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
定义和用法
ng-change指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。
ng-change指令需要搭配ng-model
指令使用。
AngularJSng-change指令指令不会覆盖原生的 onchange 事件,如果触发该事件,ng-change表达式与原生的 onchange 事件都会执行。
ng-change事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。
ng-change事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。
<input>,<SELEct>,和 <textarea> 元素支持。
值 | 描述 |
---|---|
expression | 元素值改变时执行表达式。 |
注:checkBox ng-model总是是true或false,而不是value,其他的ng-model@L_262_11@认都是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><div class="checkBox"> <label> <input name="agree" type="checkBox" value="同意" ng-model="value2" ng-change="checkBoxClick()" /> 同意协议 </label> </div> <div class="checkBox"> <label> <input name="agree" type="checkBox" value="同意2" ng-model="value2" ng-change="checkBoxClick()" /> 同意协议2 </label> </div></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); } });
HTML
<form class="form-horizontal"> <div class="form-group"> <label class="control-label">姓名:</label> <input type="text" class="form-control" ng-model="name" ng-change="txtChange();" /> </div> <div 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> </div> </form>JS
var app = angular.module('myApp',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 的@L_262_11@认情况下ng-model的结果为value值 $scope.SELEctChange = function () { console.info($scope.gradE); } });
以上是大佬教程为你收集整理的AngularJs ng-change事件/指令全部内容,希望文章能够帮你解决AngularJs ng-change事件/指令所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。