AngularJs ng-change事件/指令的用法小结


Posted in Javascript onNovember 01, 2017

本文介绍了AngularJs ng-change事件/指令的小结,分享给大家,也给自己留个笔记

定义和用法

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。

ng-change 事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。

语法

<element ng-change="expression"></element>

  1. <input>, <select>, 和  <textarea> 元素支持。
  2. <radio>,<checkbox>

参数值

描述
expression 元素值改变时执行表达式。

实例说明:当输入框的值改变时执行函数:

<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>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
 $scope.count = 0;
 $scope.myFunc = function() {
  $scope.count++;
 };
}]);
</script>

</body>

实例说明,radio和checkbox

注:checkbox ng-model总是是true或false,而不是value,其他的ng-model默认都是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); 
 } 
});

实例说明,text,select

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', []); 
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); 
 } 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
详解Vue组件实现tips的总结
Nov 01 #Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 #Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 #Javascript
js前端导出Excel的方法
Nov 01 #Javascript
JS二分查找算法详解
Nov 01 #Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 #Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 #Javascript
You might like
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
php探针不显示内存解决方法
2019/09/17 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
js module大战
2019/04/19 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
vue接口请求加密实例
2020/08/11 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
幼儿园教师辞职信
2014/01/18 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书