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 返回一个表示该请求的状态的数字 ...
随机推荐
- 《Entity Framework 6 Recipes》中文翻译——第十二章自定义EntityFramework对象(一)
本章的方法探讨一些可以应用于对象和实体框架的流程定制.这些方法涵盖了许多“幕后”的东西,它可以使你的代码更统一,比如通过更关注应用程序核心业务规则执行的细节,应用范围更广泛.我们开始本章的一个方法,告 ...
- Jquery小实例
1正反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 前端必会css整理
1.设置css样式的三种方式? 外部样式表,引入一个外部css文件 内部样式表,将css代码放在<head>标签内部 内联样式,将css样式 ...
- 编译APK时出现 This attribute must be localized 的两种解决方法 免修改xml
下面两种方法可以让你不需要修改APP XML字符串的条件下忽略 This attribute must be localized 的 Android 源码编译时的错误警告. 1.修改当前APP的 An ...
- saltstack实战2--远程执行之目标(target)
target 就是目标的意思,你要在那台机器上执行此命令或此状态.或者说将此动作或者状态文件推送给谁来执行,让那个minion执行可以进行一些匹配 对于拥有大量机器的环境,如果单独一台台的执行指定mi ...
- css3 web字体记
css3 web字体 @font-face语法 @font-face能够加载服务器端的字体,让客户端浏览器显示客户端没有安装的字体. @font-face{ font-family:<YourW ...
- java演示适配器(adapter)模式
为什么要使用模式: 模式是一种做事的一种方法,也即实现某个目标的途径,或者技术. adapter模式的宗旨就是,保留现有类所提供的服务,向客户提供接口,以满足客户的需求. 类适配器:客户端定义了接口并 ...
- MyBatis(3.2.3) - Multiple results as a map
If we have a mapped statement that returns multiple rows and we want the results in a HashMap with s ...
- 基于Tengine的反向代理详细配置
系统环境: SUSE Linux Enterprise Server 10 SP1 (x86_64) 注:所有软件包都放置在/data/software目录下 nginx_tcp_proxy_modu ...
- swift项目-模仿团购(主界面的搭建,以及首页的一些细节)
以前学习oc的时候写的一个团购的项目,现在学习swift,拿来用swift写一遍,也是连猜带蒙的,一点一点的往上凑. 今天主要是把主要的架子搭起来了. 主要有:UITabBarController,U ...