angularjs的$watch、$watchGroup、$watchCollection使用方式

 

如果想在controller里面随时监听一个值的变化那就用$watch

<p>
    <label><strong>$watch:</strong></label>
    <input type="text" ng-model="name" />
</p>
$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" />
</p>
<p>
    <label><strong>$watchGroup:</strong></label>
    <input type="text" ng-model="two" />
</p>
$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>
<ul>
    <li ng-repeat="d in lang">{{d}}</li>
</ul>
$scope.lang = ['C/C++''Java''C#''Python'];
$scope.$watchCollection('lang'function (newVal, oldVal) {
    console.log("new:"+newVal,"old:"+oldVal)
});

现在可以做个测试,使用$timeout二秒后发生变化

$timeout(function(){
    $scope.lang = ['JavaScript''Html5''Css3''Angularjs'];
},2000);

angularjs--$watch、$watchGroup、$watchCollection含义的更多相关文章

  1. $watch, $watchCollection, $watchGroup的使用

    官方文档 $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objec ...

  2. 初探AngularJS

    一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个Angula ...

  3. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  4. Stack的三种含义

    作者: 阮一峰 日期: 2013年11月29日 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈". 理解这个概念,对于理解程序的运行至关重要.容易混淆的是,这个词 ...

  5. wireshark抓包工具简介以及tcp三次握手的一些含义

    wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息.使用wireshark的人必须了解网络协议,否则就看不懂wireshark了.为了安全考虑, ...

  6. PV、EV、AC、BAC、EAC、ETC等计算公式含义

    PV.EV.AC.BAC.EAC.ETC等计算公式含义 PV Planned Value:计划值 应该完成多少工作, (按照计划截止目前应该花费的预算) AC Actual Cost:实际成本, 完成 ...

  7. [MySQL]show index from tb_name命令各列的含义

    show index from table_name 这个命令有助于诊断性能低下的查询,尤其是查询是否使用了可用的索引. 下面介绍下 这个命令显示的结果列的含义: | Table | Non_uniq ...

  8. CPU状态信息us,sy,ni,id,wa,hi,si,st含义

    转自:http://blog.csdn.net/sasoritattoo/article/details/9318893 转自:http://fishermen.iteye.com/blog/1995 ...

  9. http错误代码含义中英文对照

    Http错误代码含义中文 概要当用户试图通过 HTTP 或文件传输协议 (FTP) 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时,IIS 返回一个表示该请求的状态的数字 ...

随机推荐

  1. 修改范围PHP_INI_SYSTEM与PHP_INI_ALL的区别

    PHP_INI_USER 可在用户脚本(例如 ini_set() )或 Windows 注册表(自 PHP 5.3 起)以及 .user.ini 中设定 PHP_INI_PERDIR 可在 php.i ...

  2. SQL Server 之 在数据库之间进行数据导入导出

    1.同一服务器上数据库之间进行数据导入导出 (1).使用 SELECT INTO 导出数据 在SQL Server中使用最广泛的就是通过SELECT INTO语句导出数据,SELECT INTO语句同 ...

  3. Storm中并发程度的理解

    Storm中涉及到了很多组件,例如nimbus,supervisor等等,在参考了这两篇文章之后,对这个有了更好的理解. Understanding the parallelism of a Stor ...

  4. Android进阶笔记09:Android开发经验部分总结

    1. 在Android library中不能使用switch-case语句访问资源ID:在Android library中不能使用switch-case语句访问资源ID的原因分析及解决方案 2. 不能 ...

  5. JavaScript实现复选框的全选,反选,不选

    <script> window.onload=function(){ var CheckAll=document.getElementById('All'); var UnCheck=do ...

  6. python(3)-函数动态参数

    先来看一段代码 def show(*arg): print(arg, type(arg)) if __name__ == "__main__": show(1) show(1,2, ...

  7. [未完成]WebService学习第一天学习笔记

    [未完成]WebService学习第一天学习笔记[未完成]WebService学习第一天学习笔记

  8. 关于VI&VIM的基本使用方法

    本文转载:http://www.cnblogs.com/itech/archive/2009/04/17/1438439.html vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法, ...

  9. MSP430常见问题之LCD 显示驱动类

    Q1:晶体一般都是接32768,然后使用液晶很正常.我打算将晶体接6M的替换32768,那么液晶还能正常显示吗A1:看你所用的LCM 模块时序极限是多少HZ,然后看6M情况下,MSP430去驱动LCM ...

  10. Scala中的空

    Scala的有即Any,Scala的无是Null,null,Nil,Nothing,None,Unit.那么这几种空有什么区别呢? 一.Null&null 很多人一辈子都没有走出这个无.Nul ...