您现在的位置:首页 >> 前端 >> 内容

AngularJs通过$scope和$watch监听数据变化(方法讲解)

时间:2018/2/13 15:23:48 点击:

  核心提示: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。

Tags:AN NG GU UL 
作者:网络 来源:KHOST的博客