16、AngularJs通过$scope和$watch监听数据变化

阅读() @2018-10-29 18:16:09

AngularJs通过$scope和$watch可以检测数据的变化,从而提醒用户进行正确的操作,具体方法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .ng-cloak{display:none;}
    </style>
</head>
<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
    <input type="text" ng-model="data1" />{{error1}}
    <input type="text" ng-model="data2.title">{{error2}}
</body>
</html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
    var m = angular.module('app', []);
    m.controller('ctrl', ['$scope', function($scope){
        $scope.data1 = 'zym';
        $scope.$watch('data1', function(n, o){
            console.log(n);
            $scope.error1 = n.length>3 ? '最多3个字' : '';
        })

        $scope.data2 = {'title':'zym'};
        $scope.$watch('data2', function(n, o){
            console.log(n);
            $scope.error2 = n.title.length>3 ? '最多三个字' : '';
        }, true);
    }]);
</script>

$scope.$watch的第一个参数是要监听的变量数据,回调函数里边的第一个参数是新数据,第二个参数是旧数据。

如果监听的变量数据是一个对象,那么$scope.$watch还需要加入第三个参数true。

微信二维码