AngularJs ng-change事件/指令(转)
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 来修改。
语法
<input>, <select>, 和 <textarea> 元素支持。
<radio>,<checkbox>
参数值
值 | 描述 |
---|---|
expression | 元素值改变时执行表达式。 |
实例说明,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);
- }
- });
AngularJs ng-change事件/指令(转)的更多相关文章
- angularjs学习笔记—事件指令
ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click=" ...
- AngularJS1.X学习笔记4-内置事件指令及其他
AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...
- ng之自定义指令
最近开始研究并使用angular,今天就来简单讲讲对于ng中自定义指令的一下使用心得吧! 相信用过ng的人都对ng中的指令有所了解,指令,我将其理解为AngularJS操作HTML element的一 ...
- AngularJS HTML DOM& 事件
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...
- AngularJS 学习之事件
1.ng-click指令:定义了AngularJS点击事件 <div ng-app="" ng-controller="myCtrl"> <b ...
- angularjs的touch事件
angularJs没有touch事件.这里提供一个touch指令. ngTouch.js "use strict"; angular.module("ngTouch&qu ...
- Ⅶ.AngularJS的点点滴滴-- 事件
事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...
- angularjs directive and component 指令与组件 ( 1.5.0 以后 )
之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
随机推荐
- qs.parse()、qs.stringify()使用方法
qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 1. qs.parse()将URL解析成对象的形式 const Qs = require('qs'); let url ...
- Vue2 dist 目录下各个文件的区别
vue2 经过 2.2 版本升级后, 文件变成了 8 个: vue.common.js vue.esm.js vue.js vue.min.js vue.runtime.common.js vue.r ...
- sql server 实现多表连接查询
项目中要实现多表查询,用外连接实现. a表 a(aid,aname) 其中aid为pk b表 b(aid,bname,aid) 其中 bid为pk,aid为fk c表 c(cid,cname,aid) ...
- 转:Java中子类是否可以继承父类的static变量和方法而呈现多态特性
原文地址:Java中子类是否可以继承父类的static变量和方法而呈现多态特性 静态方法 通常,在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法,关于static方法,声明 ...
- AIX动态增加SWAP空间
增加SWAP交换页空间 查看SWAP,使用lsps –a命令查看,默认安装SWAP是512M,例如: # lsps -a Page Space Physical V ...
- 【叶问】 MySQL常用的sql调优手段或工具有哪些
MySQL常用的sql调优手段或工具有哪些1.根据执行计划优化 通常使用desc或explain,另外可以添加format=json来输出更详细的json格式的执行计划,主要注意点如下: ...
- 002-读书笔记-企业IT架构转型之道-阿里巴巴中台战略思想与架构实战-第二章 构建业务中台的基础-共享服务体系简介
2.1.回归SOA的本质-服务重用 SOA理念的核心价值:松耦合的服务带来业务的复用,通过服务的编排助力业务的快速响应和创新. 现有模式多是烟囱式结合 ESB 企业总线打通不同系统间的交互. 2.2. ...
- 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 ...
- ORM模板层
1.模板语言之变量 def index(request): name='lqz' age=18 ll=['name','age'] dic={'name':name,'age':age} class ...
- abap对象的创建和调用。方法调用
1: abap中创建类和创建对象,调用方法. *&---------------------------------------------------------------------* ...