核心提示:AngularJs通过$scope和$watch可以检测数据的变化,从而提醒用户进行正确的操作,具体方法如下:01 !DOCTYPE html02 html lang=en03 head04 meta...
AngularJs通过$scope和$watch可以检测数据的变化,从而提醒用户进行正确的操作,具体方法如下:
01 <!DOCTYPE html> 02 <html lang="en"> 03 <head> 04 <meta charset="UTF-8"> 05 <title>Title</title> 06 <style type="text/css"> 07 .ng-cloak{display:none;} 08 </style> 09 </head> 10 <body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak"> 11 <input type="text" ng-model="data1" />{{error1}} 12 <input type="text" ng-model="data2.title">{{error2}} 13 </body> 14 </html> 15 <script type="text/javascript" src="../js/angular.min.js"></script> 16 <script type="text/javascript"> 17 var m = angular.module('app', []); 18 m.controller('ctrl', ['$scope', function($scope){ 19 $scope.data1 = 'zym'; 20 $scope.$watch('data1', function(n, o){ 21 console.log(n); 22 $scope.error1 = n.length>3 ? '最多3个字' : ''; 23 }) 24 25 $scope.data2 = {'title':'zym'}; 26 $scope.$watch('data2', function(n, o){ 27 console.log(n); 28 $scope.error2 = n.title.length>3 ? '最多三个字' : ''; 29 }, true); 30 }]); 31 </script>
$scope.$watch的第一个参数是要监听的变量数据,回调函数里边的第一个参数是新数据,第二个参数是旧数据。
如果监听的变量数据是一个对象,那么$scope.$watch还需要加入第三个参数true。