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. 记录一下ionic canvas图片,还有canvas里面的图片跨域的问题

    import { Component, Inject, forwardRef } from '@angular/core'; import { IonicPage, NavController, Na ...

  2. java发送get,post请求

    方法里面有注释:参照csdn里面的,项目用时自己改 package com.bst.express; import java.io.BufferedReader; import java.io.Dat ...

  3. Adobe Flex初记

    公司项目要用Flex,之前没有接触过,菜鸟只好白手起家,把项目拉下来的同时配置下Flex的环境,以下是一篇参考: http://blog.sina.com.cn/s/blog_4c4a24db0100 ...

  4. Delphi maskedit控件的掩码含义及用法方法

    Delphi maskedit控件的掩码含义及用法方法   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 ...

  5. day4_高效处理文件

    read()将文件内容从磁盘中全部读出,放到内存,再给cpu处理,性能低,如果文件量大,很容易内存溢出或卡死. 高效方式: 方式一:一般不用的,代码行多 f = open('users.txt','r ...

  6. Java线程的状态分析

    线程状态 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于“可运行线程池”中,变得可运行,只 ...

  7. vue获取内存中的值并写入

    <template> <div class="container"> <h3>发表评论</h3> <hr> <te ...

  8. django基础-01:软件框架,MVC框架,MVT

    1. 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能,模 ...

  9. 多周期MACD趋势共振制作的方法

    我浏览了创幻论坛.理想论坛,来到MACD股市技术分析俱乐部,真正找到自己的乐土. 做人要厚道!指标之王MACD既然被先辈们创造了出来,就应由我辈发扬光大!自吹自擂者.吝啬者都应自觉退出论坛既然来到这里 ...

  10. Python3学习之路~2.8 文件操作实现简单的shell sed替换功能

    程序:实现简单的shell sed替换功能 #实现简单的shell sed替换功能,保存为file_sed.py #打开命令行输入python file_sed.py 我 Alex,回车后会把文件中的 ...