使用$watch来监视属性或对象的变化

1.Angular.Js $scope对象的$watch方法，三个参数

实例1:监听属性

    <div class="container" ng-app="myApp" ng-controller="myCtrl">
        <form>
            <div class="form-group">
                <label>姓名：</label>
                <input class="form-control" ng-model="name" />
            </div>
        </form>
        <div class="alert alert-danger">
            姓名：{{name}}
            <br />
            修改次数{{updated}}
        </div>
    </div>
    <script type="text/javascript">
        //1.使用$watch来监视属性
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function ($scope) {
            $scope.name = "张三";
            $scope.updated = 0;
            $scope.$watch('name',function () {
                $scope.updated++;
                console.info($scope.updated);
            });
        });
    </script>

实例2：获取更新时的新值或旧值

    <div class="container" ng-app="myApp" ng-controller="myCtrl">
        <form>
            <div class="form-group">
                <label>姓名：</label>
                <input class="form-control" ng-model="name" />
            </div>
        </form>
        <div class="alert alert-danger">
            姓名：{{name}}
            <br />
            修改次数{{updated}}
        </div>
    </div>
    <script type="text/javascript">
        //1.使用$watch来监视属性
        var app = angular.module('myApp',function (newValue,oldValue) {
                console.info('new:'+newValue+"----old:"+oldValue);
                if (newValue == oldValue)
                    return;
                $scope.updated++;
            });
        });
    </script>

实例3：监听自定义对象

    <div class="container" ng-app="myApp" ng-controller="myCtrl">
        <form>
            <div class="form-group">
                <label>姓名：</label>
                <input class="form-control" ng-model="user.name" />
            </div>
        </form>
        <div class="alert alert-danger">
            姓名：{{user.name}}
            <br />
            修改次数{{updated}}
        </div>
    </div>
    <script type="text/javascript">
        //1.使用$watch来监视对象
        var app = angular.module('myApp',function ($scope) {
            $scope.user = { name: '张三' };
            $scope.updated = 0;
            $scope.$watch('user',oldValue) {
                console.info(newValue);
                console.info(oldValue);
                if (newValue == oldValue)
                    return;
                $scope.updated++;
            },true);
        });
    </script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!