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 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
jquery移动节点实例
Jan 14 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
浅析vue component 组件使用
Mar 06 Javascript
jquery拖动改变div大小
Jul 04 jQuery
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
ES6函数实现排它两种写法解析
May 13 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
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
javascript知识点收藏
2007/02/22 Javascript
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python中的函数作用域
2018/05/07 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python实现泊松图像融合
2018/07/26 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
出生公证委托书
2014/04/03 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Python list列表删除元素的4种方法
2021/11/01 Python
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL