[AngularJS] $scope.$watch

/**
 * 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>

posted @ 2014-11-13 07:19 Zhentiw 阅读(513) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

公告

昵称： Zhentiw
园龄： 13年2个月
粉丝： 41
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Answer1215

[AngularJS] $scope.$watch

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜