angularjs的$watch、$watchGroup、$watchCollection使用方式
来源:互联网 发布:为什么淘宝昵称改不了 编辑:程序博客网 时间:2024/06/08 05:34
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);
点击查看完整代码
0 0
- angularjs的$watch、$watchGroup、$watchCollection使用方式
- angularjs的$watch、$watchGroup、$watchCollection
- angularjs的$watch、$watchGroup、$watchCollection的区别
- [angular]服务之2$scope之$watch、$watchGroup、$watchCollection
- angularjs的监听方法$watch、$watchGrou、$watchCollection的使用方法
- [AngularJS面面观] 12. scope中的watch机制---第三种策略$watchCollection
- angularJS使用$watch监控数据模型的变化
- AngularJS $watch的用法
- angularJS $watch $timeout 使用心得
- $watch--angularJs的监听事件
- angularjs $watch
- angularJS的$watch失效问题的解决方案
- angularJS的$watch失效问题的解决方案
- Angularjs实践之优化你的$watch
- angularJS<六、$scope里的$watch方法>
- angularjs $scope.$watch 遇到的问题
- 【AngularJS】释放多余的$watch检测函数
- angularJS<$scope里的$watch方法>
- CodeForces
- Mybatis LIKE 模糊查询
- 在wamp 下安装扩展 redis 扩展和memcache扩展
- 微信小程序开发:Flex布局
- SQL高级语句-JOIN 用于根据两个或多个表中的列之间的关系,从这些表中查询数据。
- angularjs的$watch、$watchGroup、$watchCollection使用方式
- Eclipse的Maven配置
- fir.im Weekly
- pat 1013. Battle Over Cities (25)
- 程序简单的底层优化
- php curl选项列表参数详细介绍
- js对象、Array对象及angularjs的遍历
- android 通过uri获取bitmap图片并压缩
- 浅析Python中的struct模块