from:http://blog.csdn.net/u011127019/article/details/52564111

定义和用法

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>

<input>, <select>, 和  <textarea> 元素支持。

<radio>,<checkbox>


参数值

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

实例说明,radio和checkbox

注:checkbox ng-model总是是true或false,而不是value,其他的ng-model默认都是value 的值

HTML

  1. <h3>Radio 控件测试</h3>
  2. <p><label>
  3. <input type="radio" value="男" name="sex" ng-model="value1" ng-change="radioChecked()" />
  4. </label>
  5. <label>
  6. <input type="radio" value="女" name="sex" ng-model="value1" ng-change="radioChecked()" />
  7. </label></p>
  8. <h3>checked 控件测试</h3>
  9. <p><div class="checkbox">
  10. <label>
  11. <input name="agree" type="checkbox" value="同意" ng-model="value2" ng-change="checkboxClick()" />
  12. 同意协议
  13. </label>
  14. </div>
  15. <div class="checkbox">
  16. <label>
  17. <input name="agree" type="checkbox" value="同意2" ng-model="value2" ng-change="checkboxClick()" />
  18. 同意协议2
  19. </label>
  20. </div></p>

JS:

[javascript] view plain copy

print?

  1. var app = angular.module('myApp', []);
  2. app.controller('validateCtrl', function ($scope) {
  3. //randio ng-change事件和原始onchange相同
  4. //radio ng-model 的值是value
  5. $scope.radioChecked = function () {
  6. console.info($scope.value1);
  7. }
  8. //checkbox ng-change事件和原始onchange相同
  9. //checkbox ng-model总是是true或false
  10. $scope.checkboxClick = function () {
  11. console.info($scope.value2);
  12. }
  13. });

实例说明,text,select

HTML

  1. <form class="form-horizontal">
  2. <div class="form-group">
  3. <label class="control-label">姓名:</label>
  4. <input type="text" class="form-control" ng-model="name" ng-change="txtChange();" />
  5. </div>
  6. <div class="form-group">
  7. <label class="control-label">选择年级:</label>
  8. <select class="form-control" ng-change="selectChange();" ng-model="grade">
  9. <option value="1">一年级</option>
  10. <option value="2">二年级</option>
  11. </select>
  12. </div>
  13. </form>

JS

[javascript] view plain copy

print?

  1. var app = angular.module('myApp', []);
  2. app.controller('validateCtrl', function ($scope) {
  3. //textbox 的ng-change事件和原始ng-change不相同,而是和$scope.$watch()监听相同
  4. //textbox 的ng-model为当前输入框的内容,为value值
  5. $scope.txtChange = function () {
  6. console.info($scope.name);
  7. }
  8. //select 的ng-change事件和原始ng-change相同
  9. //ng-model 的默认情况下ng-model的结果为value值
  10. $scope.selectChange = function () {
  11. console.info($scope.grade);
  12. }
  13. });

AngularJs ng-change事件/指令(转)的更多相关文章

  1. angularjs学习笔记—事件指令

    ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click=" ...

  2. AngularJS1.X学习笔记4-内置事件指令及其他

    AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...

  3. ng之自定义指令

    最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...

  4. AngularJS HTML DOM& 事件

    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...

  5. AngularJS 学习之事件

    1.ng-click指令:定义了AngularJS点击事件 <div ng-app="" ng-controller="myCtrl"> <b ...

  6. angularjs的touch事件

    angularJs没有touch事件.这里提供一个touch指令. ngTouch.js "use strict"; angular.module("ngTouch&qu ...

  7. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  8. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  9. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  10. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

随机推荐

  1. qs.parse()、qs.stringify()使用方法

    qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 1. qs.parse()将URL解析成对象的形式 const Qs = require('qs'); let url ...

  2. Vue2 dist 目录下各个文件的区别

    vue2 经过 2.2 版本升级后, 文件变成了 8 个: vue.common.js vue.esm.js vue.js vue.min.js vue.runtime.common.js vue.r ...

  3. sql server 实现多表连接查询

    项目中要实现多表查询,用外连接实现. a表 a(aid,aname) 其中aid为pk b表 b(aid,bname,aid) 其中 bid为pk,aid为fk c表 c(cid,cname,aid) ...

  4. 转:Java中子类是否可以继承父类的static变量和方法而呈现多态特性

    原文地址:Java中子类是否可以继承父类的static变量和方法而呈现多态特性 静态方法 通常,在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法,关于static方法,声明 ...

  5. AIX动态增加SWAP空间

    增加SWAP交换页空间 查看SWAP,使用lsps –a命令查看,默认安装SWAP是512M,例如: # lsps -a              Page Space      Physical V ...

  6. 【叶问】 MySQL常用的sql调优手段或工具有哪些

     MySQL常用的sql调优手段或工具有哪些1.根据执行计划优化   通常使用desc或explain,另外可以添加format=json来输出更详细的json格式的执行计划,主要注意点如下:     ...

  7. 002-读书笔记-企业IT架构转型之道-阿里巴巴中台战略思想与架构实战-第二章 构建业务中台的基础-共享服务体系简介

    2.1.回归SOA的本质-服务重用 SOA理念的核心价值:松耦合的服务带来业务的复用,通过服务的编排助力业务的快速响应和创新. 现有模式多是烟囱式结合 ESB 企业总线打通不同系统间的交互. 2.2. ...

  8. React篇-报错信息:warning: Can't call setState (or forceUpdate) on an unmounted component.

    报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...

  9. ORM模板层

    1.模板语言之变量 def index(request): name='lqz' age=18 ll=['name','age'] dic={'name':name,'age':age} class ...

  10. abap对象的创建和调用。方法调用

    1: abap中创建类和创建对象,调用方法. *&---------------------------------------------------------------------* ...