AngularJs学习之路(十)
来源:互联网 发布:什么是数据库营销 编辑:程序博客网 时间:2024/05/22 16:50
AngularJS $watch
$watch方法,它可以帮助我们在每个scope中监视其中的变量。
单一变量
$watch 对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。
$scope.count=1;$scope.$watch('count',function(){...});多变量$watch
//当count或page变化时,都会执行这个匿名函数$scope.count=1;$scope.page=1;$scope.$watch('count + page',function(){...});对象或者数组
$scope.items=[{a:1},{a:2}{a:3}];$scope.$watch('items',function(){...},true);
DEMO
angular.module('myApp', []).controller('userCtrl', function($scope) {$scope.fName = '';$scope.lName = '';$scope.passw1 = '';$scope.passw2 = '';$scope.users = [{id:1, fName:'Hege', lName:"Pege" },{id:2, fName:'Kim', lName:"Pim" },{id:3, fName:'Sal', lName:"Smith" },{id:4, fName:'Jack', lName:"Jones" },{id:5, fName:'John', lName:"Doe" },{id:6, fName:'Peter',lName:"Pan" }];$scope.edit = true;$scope.error = false;$scope.incomplete = false; $scope.editUser = function(id) { if (id == 'new') { $scope.edit = true; $scope.incomplete = true; $scope.fName = ''; $scope.lName = ''; } else { $scope.edit = false; $scope.fName = $scope.users[id-1].fName; $scope.lName = $scope.users[id-1].lName; }};$scope.$watch('passw1',function() {$scope.test();});$scope.$watch('passw2',function() {$scope.test();});$scope.$watch('fName', function() {$scope.test();});$scope.$watch('lName', function() {$scope.test();});$scope.test = function() { if ($scope.passw1 !== $scope.passw2) { $scope.error = true; } else { $scope.error = false; } $scope.incomplete = false; if ($scope.edit && (!$scope.fName.length || !$scope.lName.length || !$scope.passw1.length || !$scope.passw2.length)) { $scope.incomplete = true; }};});
阅读全文
0 0
- AngularJs学习之路(十)
- angularJS学习之路(二十)---自定义指令作用域绑定策略问题
- angularJS学习之路(二十)---自定义指令---transclude的作用
- AngularJS学习之路(一)AngularJS简单操作
- AngularJS学习之路(二)AngularJS的表达式
- angularJS学习之路(二)---模块
- angularJS学习之路(三)---控制器
- angularJS学习之路(五)---表达式
- angularJS学习之路(六)---指令
- AngularJs学习之路(一)
- AngularJs学习之路(二)
- AngularJs学习之路(三)
- AngularJs学习之路(四)
- AngularJs学习之路(五)
- AngularJs学习之路(六)
- AngularJs学习之路(七)
- AngularJs学习之路(八)
- AngularJs学习之路(九)
- AppStore 隐私政策
- linux ping: command not found
- E: Sub-process /usr/bin/dpkg returned an error code (1) python-pil:amd64 解决方法
- 诚招:鉴黄专家
- Ansoft Links v4.2.7z
- AngularJs学习之路(十)
- 七层模型对应协议记忆笔记
- Android跳转系统设置页面大全
- SpringMVC上传图片存到指定位置,并能够使用Tomcat访问
- mysql load 文件,以不可见字符为分隔符
- CentOS 设置mysql的远程访问
- WebStorm 自定义字体+颜色+语法高亮+导入导出用户设置
- 实现倒计时功能--函数的局部变量问题
- SQL概述