AngularJS实现一次监听多个值发生的变化


Posted in Javascript onAugust 31, 2016

一、$watch简单使用

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}

listener:watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子:

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

    console.log(newValue);

    console.log(oldValue);

});

$timeout(function(){

    $scope.name = "world";

},1000);

二、监听多个值的变化

大家通常遇到的情况为通过$watch()一次监听一个值的变化,当然这种时候满足绝大部分情况。但是通过阅读官网对于$watch()的解释,$watch()还有第三个参数,第三个参数是一个布尔类型,表示是否深度监听,深度监听的例子就是是否进行比较对象的属性。

这样我们就可以实现一次监听多个值的变化。

示例代码

var app=angular.module("watchApp",[])
      .controller("watchController",["$scope",function($scope){
         $scope.object={};
         $scope.object.one=$scope.one;
         $scope.object.one=$scope.one;
         $scope.$watch("object",function(){
            .....
          },true);
      }])

总结

以上就是关于AngularJS如何一次监听多个值发生变化的全部内容,大家都学会了吗?希望这篇文章的内容对大家的学习和工作能有所帮助,如果有疑问可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
JS实现简易计算器
Feb 14 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 #Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 #Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 #Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 #Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 #Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 #Javascript
jquery datatable服务端分页
Aug 31 #Javascript
You might like
php stripslashes和addslashes的区别
2014/02/03 PHP
提高php编程效率技巧
2015/08/13 PHP
php经典算法集锦
2015/11/14 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
回调函数的意义以及python实现实例
2017/06/20 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
django将数组传递给前台模板的方法
2019/08/06 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
营销与策划个人求职信
2013/09/22 职场文书
政风行风整改方案
2014/10/25 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
入队仪式主持词
2015/07/04 职场文书