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

最新推荐文章于 2021-01-07 16:41:21 发布

K'illCode

最新推荐文章于 2021-01-07 16:41:21 发布

阅读量1k

点赞数 1

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277359

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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>