angularjs的$watch、$watchGroup、$watchCollection的区别

Angularjs 2020-05-05

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

 
       <p> 
      
       <label><strong>$watch:</strong></label> 
      
       <input type="text"ng-model="name"/> 
      
</p>

$scope.$watch(,function(newVal,oldVal){

console.log("new:"+newVal,"old:"+oldVal)

});

以上代码实现监听name属性值的变化,但是有个缺点假如要监听很多个属性值,就要写很多个$watch
为了解决上面的问题,可以使用$watchGroup,这个监听器是把多个属性使用数组的形式作为第一个参数传入

<label>$watchGroup:</label>

"one"

"two"$scope.$watchGroup([],oldVal) {

+oldVal);

//注意：newVal与oldVal都返回的是一个数组

$watchCollection是为一堆数据进行监听

>$watchCollection:

<ul>

<li ng-repeat="d in lang">{{d}}</li>

</ul>

$scope.lang = ['C/C++''Java''C#''Python'];

$scope.$watchCollection('lang'

 
     
      
       
       +oldVal)

现在可以做个测试,使用$timeout二秒后发生变化 
  
  
   
    
     
     $timeout((){ 
     
    
   
  
  
   
    
     
     'JavaScript''Html5''Css3''Angularjs'];

},2000);

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...

AngularJS中使用Chart.js制折线图与饼图实例 Chart.js 是...

IE浏览器兼容性后续前言继续尝试解决IE浏览器兼容性问题，...

Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：h...

在AngularJS应用中集成科大讯飞语音输入功能前言根据项目...

Angular数据更新不及时问题探讨前言在修复控制角标正确变...

相关文章