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.

  • 相关阅读:
    【小米OJ-找多少个等差数列】动态规划
    【小米OJ-找出可能的合的组合】深搜(dfs)
    【小米OJ-移除k位得到最小值】栈的应用
    【小米OJ-小米兔的轨迹】顺时针蛇形矩形
    Qt常用类
    file_operations
    Proc文件系统
    memset
    Source Insight快捷键大全
    内核内存分配
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4095610.html
Copyright © 2011-2022 走看看