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的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
js实现购物车商品数量加减
Sep 21 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
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
JQuery toggle使用分析
2009/11/16 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
手机端转换rem适应
2017/04/01 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Python调用服务接口的实例
2019/01/03 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
python名片管理系统开发
2020/06/18 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Python里面如何拷贝一个对象
2014/02/17 面试题
自我介绍演讲稿
2014/01/15 职场文书
农村改厕实施方案
2014/03/22 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
积极向上的团队口号
2014/06/06 职场文书
服务行业口号
2014/06/11 职场文书
关于旅游的活动方案
2014/08/15 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Pytorch 实现变量类型转换
2021/05/17 Python
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers