[AngularJS] $scope.$watch
2024-08-27 16:22:15
/**
* Created by Answer1215 on 11/13/2014.
*/ function MainCtrl($scope){ function isLongEnough (pwd) {
return pwd.length > 4;
} function hasNumbers (pwd) {
return /[0-9]/.test(pwd);
} this.watchPwd = function(newVal, oldVal){
//first init, you might got undefined
if (!newVal) return;
$scope.reqs = []; if (!isLongEnough(newVal)) {
$scope.reqs.push('Too short');
} if (!hasNumbers(newVal)) {
$scope.reqs.push('Must include numbers');
} $scope.showReqs = $scope.reqs.length;
} //user.password is a string
//user is an object
$scope.$watch('user.password',this.watchPwd); //$watch can accept the third argument, once add it, angularJS
//will do lose value checking instead of reference checking, it's quite
//expensive
//in all $watch is expensive, use ng-change if you can
// $scope.$watch('user.password',this.watchPwd, true);
} angular.module('app',[])
.controller('MainCtrl', MainCtrl);
$watch can accept the third arguement, once set it as true:
$scope.$watch('user.password',this.watchPwd, true);
AngularJS will do lose value checking instead of reference checking, it is quite expensive.
For best pratise: avoid using $watch as much as you can, instead using ng-change.
<input ng-model="myModel" ng-change="callback">
<!--
$scope.callback = function () {
// go
};
-->
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>$watch</title>
<script src="bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<style type="text/css">
.panel {
width: 70%;
margin: 30px auto;
}
</style>
</head>
<body ng-controller="MainCtrl"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Create Account</h3>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<label for="eml">Email address</label>
<input id="eml"
type="email"
class="form-control"
placeholder="Email address"
ng-model="user.email"/>
</div> <div class="form-group">
<label for="pwd">Password</label>
<input id="pwd"
type="password"
class="form-control"
placeholder="Password"
ng-model="user.password" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="panel panel-danger" ng-show="showReqs">
<div class="panel-heading">
<h3 class="panel-title">Password Requirement</h3>
</div>
<div class="panel-body">
<ul>
<li ng-repeat="req in reqs">{{req}}</li>
</ul>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Read More: https://egghead.io/lessons/angularjs-the-basics-of-scope-watch
最新文章
- 关于学习angularJS 的一些心得
- Debian8修改启动默认运行级别
- JAVA的网络编程基础概念
- 栅栏 CyclicBarrier
- 【JavaScript】重温Javascript继承机制
- BootStrap图标
- ASP大数据量使用GetRows()提升速度
- GC overhead limit exceeded解决
- ubuntu -server 忘记root 密码方法
- [ACM] POJ 3254 Corn Fields(状态压缩)
- PHP关于foreach使用引用变量的坑
- 在 WindowMobile 上的模拟LED 显示屏插件(转)
- docker对cpu使用及在kubernetes中的应用
- SpringCloud的DataRest(四)restful特性展示
- mac电脑 上强大的RAW图像处理工具 ——RAW Power
- MongoDB学习(操作集合中的文档)
- [Swift]LeetCode334. 递增的三元子序列 | Increasing Triplet Subsequence
- python中线程的知识点
- 20155324 2016-2017-2 《Java程序设计》第7周学习总结
- 20165231 实验一 Java开发环境的熟悉
热门文章
- 洛谷P2730 魔板 [广搜,字符串,STL]
- 5分钟掌握智联招聘网站爬取并保存到MongoDB数据库
- AtcoderGrandContest 005 F. Many Easy Problems
- ARC 101 C - Candles
- python3-开发进阶Flask的基础
- git提交时”warning: LF will be replaced by CRLF“提示
- PAT甲级1107. Social Clusters
- Druid 配置 wallfilter
- [0day]基础工具学习
- linux下printf打印带颜色的字符串