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.

  • 相关阅读:
    JSON 数字排序 多字段排序
    hdu-4747-Mex
    Android SDK更新缓慢或无法更新的解决方法
    UVA 11806
    SDL显示内存中的图像
    Cocos2d-x 2.1.5 简单动画
    codeforce343A
    android 控件的移动
    Erlang千万级用户游戏框架(Openpoker)源码文件分析清单
    八大排序c++可运行精简版,一目了然
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4095610.html
Copyright © 2011-2022 走看看