angularjs的$watch、$watchGroup、$watchCollection使用方式

angularjs的$watch、$watchGroup、$watchCollection使用方式

Posted on  2014/05/12

如果想在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);

点击查看完整代码

This entry was posted in  angularJS by  admin. Bookmark the  permalink.