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

前端之家收集整理的这篇文章主要介绍了使用$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>


猜你在找的Angularjs相关文章