angularjs的$watch、$watchGroup、$watchCollection使用方式
如果想在controller里面随时监听一个值的变化那就用$watch
<label><strong>$watch:</strong></label> |
<input type= "text" ng-model= "name" /> |
$scope.$watch( "name" , function (newVal,oldVal){ |
console.log( "new:" +newVal, "old:" +oldVal) |
以上代码实现监听name属性值的变化,但是有个缺点假如要监听很多个属性值,就要写很多个$watch
为了解决上面的问题,可以使用$watchGroup,这个监听器是把多个属性使用数组的形式作为第一个参数传入
<p style= "margin-top: 20px" > |
<label><strong>$watchGroup:</strong></label> |
<input type= "text" ng-model= "one" /> |
<label><strong>$watchGroup:</strong></label> |
<input type= "text" ng-model= "two" /> |
$scope.$watchGroup([ "one" , "two" ], function (newVal,oldVal) { |
console.log( "new:" +newVal, "old:" +oldVal); |
//注意:newVal与oldVal都返回的是一个数组 |
$watchCollection是为一堆数据进行监听
<p style= "margin-top: 20px" ><strong>$watchCollection:</strong></p> |
<li ng-repeat= "d in lang" >{{d}}</li> |
$scope.lang = [ 'C/C++' , 'Java' , 'C#' , 'Python' ]; |
$scope.$watchCollection( 'lang' , function (newVal, oldVal) { |
console.log( "new:" +newVal, "old:" +oldVal) |
现在可以做个测试,使用$timeout二秒后发生变化
$scope.lang = [ 'JavaScript' , 'Html5' , 'Css3' , 'Angularjs' ]; |
- $watch, $watchCollection, $watchGroup的使用
官方文档 $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objec ...
- 初探AngularJS
一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...
- 由css reset想到的深入理解margin及em的含义
由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...
- Stack的三种含义
作者: 阮一峰 日期: 2013年11月29日 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈". 理解这个概念,对于理解程序的运行至关重要.容易混淆的是,这个词 ...
- wireshark抓包工具简介以及tcp三次握手的一些含义
wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息.使用wireshark的人必须了解网络协议,否则就看不懂wireshark了.为了安全考虑, ...
- PV、EV、AC、BAC、EAC、ETC等计算公式含义
PV.EV.AC.BAC.EAC.ETC等计算公式含义 PV Planned Value:计划值 应该完成多少工作, (按照计划截止目前应该花费的预算) AC Actual Cost:实际成本, 完成 ...
- [MySQL]show index from tb_name命令各列的含义
show index from table_name 这个命令有助于诊断性能低下的查询,尤其是查询是否使用了可用的索引. 下面介绍下 这个命令显示的结果列的含义: | Table | Non_uniq ...
- CPU状态信息us,sy,ni,id,wa,hi,si,st含义
转自:http://blog.csdn.net/sasoritattoo/article/details/9318893 转自:http://fishermen.iteye.com/blog/1995 ...
- http错误代码含义中英文对照
Http错误代码含义中文 概要当用户试图通过 HTTP 或文件传输协议 (FTP) 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时,IIS 返回一个表示该请求的状态的数字 ...
随机推荐
- 修改范围PHP_INI_SYSTEM与PHP_INI_ALL的区别
PHP_INI_USER 可在用户脚本(例如 ini_set() )或 Windows 注册表(自 PHP 5.3 起)以及 .user.ini 中设定 PHP_INI_PERDIR 可在 php.i ...
- SQL Server 之 在数据库之间进行数据导入导出
1.同一服务器上数据库之间进行数据导入导出 (1).使用 SELECT INTO 导出数据 在SQL Server中使用最广泛的就是通过SELECT INTO语句导出数据,SELECT INTO语句同 ...
- Storm中并发程度的理解
Storm中涉及到了很多组件,例如nimbus,supervisor等等,在参考了这两篇文章之后,对这个有了更好的理解. Understanding the parallelism of a Stor ...
- Android进阶笔记09:Android开发经验部分总结
1. 在Android library中不能使用switch-case语句访问资源ID:在Android library中不能使用switch-case语句访问资源ID的原因分析及解决方案 2. 不能 ...
- JavaScript实现复选框的全选,反选,不选
<script> window.onload=function(){ var CheckAll=document.getElementById('All'); var UnCheck=do ...
- python(3)-函数动态参数
先来看一段代码 def show(*arg): print(arg, type(arg)) if __name__ == "__main__": show(1) show(1,2, ...
- [未完成]WebService学习第一天学习笔记
[未完成]WebService学习第一天学习笔记[未完成]WebService学习第一天学习笔记
- 关于VI&VIM的基本使用方法
本文转载:http://www.cnblogs.com/itech/archive/2009/04/17/1438439.html vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法, ...
- MSP430常见问题之LCD 显示驱动类
Q1:晶体一般都是接32768,然后使用液晶很正常.我打算将晶体接6M的替换32768,那么液晶还能正常显示吗A1:看你所用的LCM 模块时序极限是多少HZ,然后看6M情况下,MSP430去驱动LCM ...
- Scala中的空
Scala的有即Any,Scala的无是Null,null,Nil,Nothing,None,Unit.那么这几种空有什么区别呢? 一.Null&null 很多人一辈子都没有走出这个无.Nul ...