zoukankan      html  css  js  c++  java
  • [AngularJS] ng-change vs $scope.$watch

                <div class="form-group">
                    <label for="pwd">Password</label>
                    <input id="pwd"
                           type="password"
                           class="form-control"
                           placeholder="Password"
                           ng-change="onChange()"
                           ng-model="user.password">
    
    ---------------------------------
        //ngChange
        $scope.onChange=function(){
            var newVal = $scope.user.password;
            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;
        }

    For a form, when user type on the input field, both ngChange and $watch will get fired.

    The difference between ngChange and $watch is :

    ngChange:

    If I click "Please Hack Me," you can see the value change but we don't get our warnings back.

                <button class="btn btn-danger"
                        ng-click="user.password = 'pwd'">Please Hack Me</button>

    The reason for that is ng-change only reacts to changes in the actual form element that you have declared it on. If your value changes programmatically as the result of anything but actually interacting with the element ng-change is not going to fire.

    $watch:

    $watch is not recommended by Angular team, because it is expensive. In most cases, when monitor the form elements, we can use ngChange instead of $watch.

    But for the case value changes programmatically, you have to use $watch.

  • 相关阅读:
    解决Android调用https服务API时出错的问题
    Sqlite 数据库出现database disk image is malformed报错的解决方法
    Bootstrap Chart组件使用分享
    Devexpress TreeList控件绑定显示父子节点对像
    回顾过去的2015展望已经到来的2016年,给自己的一些计划
    1006
    1003
    1001
    Swing用户界面组件-1
    图形程序设计
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4095610.html
Copyright © 2011-2022 走看看