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

前端之家收集整理的这篇文章主要介绍了angularjs的$watch、$watchGroup、$watchCollection的区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<p>@H_502_15@
@H_502_15@<label><strong>$watch:</strong></label>@H_502_15@
<input type=@H_502_15@"text"@H_502_15@ng-model=@H_502_15@"name"@H_502_15@/>@H_502_15@
</p>@H_502_15@
$scope.$watch(@H_502_15@,@H_502_15@function@H_502_15@(newVal,oldVal){@H_502_15@
console.log(@H_502_15@"new:"@H_502_15@+newVal,@H_502_15@"old:"@H_502_15@+oldVal)@H_502_15@
});@H_502_15@

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

<p style=@H_502_15@"margin-top: 20px"@H_502_15@>@H_502_15@
<label><strong>$watchGroup:</strong></label>@H_502_15@
"one"@H_502_15@</p>@H_502_15@
"two"@H_502_15@$scope.$watchGroup([@H_502_15@],oldVal) {@H_502_15@
+oldVal);@H_502_15@
@H_502_15@//注意:newVal与oldVal都返回的是一个数组@H_502_15@
$watchCollection是为一堆数据进行监听

><strong>$watchCollection:</strong></p>@H_502_15@
<ul>@H_502_15@
<li ng-repeat=@H_502_15@"d in lang"@H_502_15@>{{d}}</li>@H_502_15@
</ul>@H_502_15@
$scope.lang = [@H_502_15@'C/C++'@H_502_15@'Java'@H_502_15@'C#'@H_502_15@'Python'@H_502_15@];@H_502_15@
$scope.$watchCollection(@H_502_15@'lang'@H_502_15@502_15@
+oldVal)@H_502_15@
现在可以做个测试,使用$timeout二秒后发生变化

$timeout(@H_502_15@(){@H_502_15@
'JavaScript'@H_502_15@'Html5'@H_502_15@'Css3'@H_502_15@'Angularjs'@H_502_15@];@H_502_15@
},2000);@H_502_15@

转自: https://blog.csdn.net/helloxiaoliang/article/details/52173132

猜你在找的Angularjs相关文章