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

 更新时间:2016年08月31日 11:57:25   作者:MakingChoice  
这文章给大家介绍了如何利用AngularJS一次监听多个值发生的变化,文中通过示例代码演示,这样更方便大家理解学习,有需要的可以参考借鉴。

一、$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如何一次监听多个值发生变化的全部内容,大家都学会了吗?希望这篇文章的内容对大家的学习和工作能有所帮助,如果有疑问可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • angular2路由之routerLinkActive指令【推荐】

    angular2路由之routerLinkActive指令【推荐】

    这篇文章主要介绍了angular2路由之routerLinkActive指令的相关资料,需要的朋友可以参考下
    2018-05-05
  • angularjs实现过滤并替换关键字小功能

    angularjs实现过滤并替换关键字小功能

    这篇文章主要为大家详细介绍了angularjs实现过滤并替换关键字小功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • RequireJs的使用详解

    RequireJs的使用详解

    本文主要介绍了RequireJs的使用。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • AngularJS Select(选择框)使用详解

    AngularJS Select(选择框)使用详解

    这篇文章主要为大家详细介绍了AngularJS Select选择框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • AngularJS基础学习笔记之指令

    AngularJS基础学习笔记之指令

    指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用。
    2015-05-05
  • angularjs+bootstrap实现自定义分页的实例代码

    angularjs+bootstrap实现自定义分页的实例代码

    本篇文章主要介绍了angularjs+bootstrap实现自定义分页的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 实例详解angularjs和ajax的结合使用

    实例详解angularjs和ajax的结合使用

    本篇文章给大家介绍angularjs和ajax的结合使用,本文介绍的非常详细,对angularjs和ajax感兴趣的朋友一起参考下吧
    2015-10-10
  • angular2 组件之间通过service互相传递的实例

    angular2 组件之间通过service互相传递的实例

    今天小编就为大家分享一篇angular2 组件之间通过service互相传递的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • angular.js 路由及页面传参示例

    angular.js 路由及页面传参示例

    本篇文章主要介绍了angular.js 路由及页面传参示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • AngularJS延迟加载html template

    AngularJS延迟加载html template

    这篇文章主要介绍了AngularJS延迟加载html template 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07

最新评论