angularjs中使用$scope.$watch监控对象模型的变化

最新推荐文章于 2018-12-02 18:27:43 发布

diejiankuai3444

最新推荐文章于 2018-12-02 18:27:43 发布

阅读量126

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/modou/p/5878240.html

版权

如果对象模型发生变化时，可以使用$scope.$watch监控变化

<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<input type="text" ng-model="text1" ng-model-options="{ updateOn: 'blur' }" />
<div>输入框内容改变次数：{{count}}</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', [])
.controller('ctrl', function($scope){
    $scope.count = 0;
    $scope.$watch('text1',function(){
        $scope.count++;
    });
});
</script>
</html>

稍微改一下，输出修改前后的内容：

<html ng-app="myApp">
<head>
<title>angularjs-demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<input type="text" ng-model="text1" ng-model-options="{ updateOn: 'blur' }" />
<div>输入框内容改变次数：{{count}}</div>
<div>原内容：{{content1}}</div>
<div>新内容：{{content2}}</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', [])
.controller('ctrl', function($scope){
    $scope.count = 0;
    $scope.$watch('text1',function(newValue,oldValue){
        $scope.count++;
        $scope.content1 = oldValue;
        $scope.content2 = newValue;
    });
});
</script>
</html>

转载于:https://www.cnblogs.com/modou/p/5878240.html

diejiankuai3444

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs中使用$scope.$watch监控对象模型的变化

如果对象模型发生变化时，可以使用$scope.$watch监控变化<html ng-app="myApp"><head><title>angularjs-demo</title><script type="text/javascript" src="lib/angularjs/angular.min.js" cha...
复制链接

扫一扫