zoukankan      html  css  js  c++  java
  • angularjs--$watch、$watchGroup、$watchCollection含义

    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);
  • 相关阅读:
    mysql 锁
    python——三道贪心算法例题
    mysql 常见面试题
    API 管理工具
    如何实现一个简化版的 jQuery
    js设计模式--发布订阅模式
    React应该如何优雅的绑定事件?
    js数据结构-链表
    前端开发中的Error以及异常捕获
    vue-router和webpack懒加载,页面性能优化篇
  • 原文地址:https://www.cnblogs.com/huangshoushi/p/5985250.html
Copyright © 2011-2022 走看看