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 拥有自定义 ...
随机推荐
- 记录一下ionic canvas图片,还有canvas里面的图片跨域的问题
import { Component, Inject, forwardRef } from '@angular/core'; import { IonicPage, NavController, Na ...
- java发送get,post请求
方法里面有注释:参照csdn里面的,项目用时自己改 package com.bst.express; import java.io.BufferedReader; import java.io.Dat ...
- Adobe Flex初记
公司项目要用Flex,之前没有接触过,菜鸟只好白手起家,把项目拉下来的同时配置下Flex的环境,以下是一篇参考: http://blog.sina.com.cn/s/blog_4c4a24db0100 ...
- 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 ...
- day4_高效处理文件
read()将文件内容从磁盘中全部读出,放到内存,再给cpu处理,性能低,如果文件量大,很容易内存溢出或卡死. 高效方式: 方式一:一般不用的,代码行多 f = open('users.txt','r ...
- Java线程的状态分析
线程状态 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于“可运行线程池”中,变得可运行,只 ...
- vue获取内存中的值并写入
<template> <div class="container"> <h3>发表评论</h3> <hr> <te ...
- django基础-01:软件框架,MVC框架,MVT
1. 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能,模 ...
- 多周期MACD趋势共振制作的方法
我浏览了创幻论坛.理想论坛,来到MACD股市技术分析俱乐部,真正找到自己的乐土. 做人要厚道!指标之王MACD既然被先辈们创造了出来,就应由我辈发扬光大!自吹自擂者.吝啬者都应自觉退出论坛既然来到这里 ...
- Python3学习之路~2.8 文件操作实现简单的shell sed替换功能
程序:实现简单的shell sed替换功能 #实现简单的shell sed替换功能,保存为file_sed.py #打开命令行输入python file_sed.py 我 Alex,回车后会把文件中的 ...