angularjs中使用$scope.$watch監控物件模型的變化

魔豆發表於2016-09-17
AngularJS物件模型

如果物件模型發生變化時，可以使用$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>

 

相關文章