環境
angularjs1.3
値の変更監視
ある値の変更を監視して、変更したら、◯◯するというときに便利な$scope.$watch と $scope.$warchGroup について
1.単一の値を変更監視するとき=> $scope.$watchを使用
以下はサンプル。
$scope.messageの変更を監視して、変更があればngと表示する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="WatchController">
{{result}}<br>
{{message}}<br>
<input type="button" ng-click="change()" value="change">
</div>
<script type="text/javascript">
angular.module('app', [])
.controller('WatchController', ['$scope', function($scope) {
$scope.message = 'Hello World!';
$scope.result = '';
$scope.change = function() {
$scope.message = 'change!!';
};
$scope.$watch('message', function(newValue, oldValue, scope) {
if(angular.equals(newValue, oldValue)) {
scope.result = 'ok';
} else {
scope.result = 'ng';
}
});
}]);
</script>
</body>
</html>
2.複数の値の変化をまとめて監視する場合=>$scope.$watchGroupを使用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="WatchGroupController">
{{result}}<br>
<input type="button" ng-click="change1()" value="change1">
<input type="button" ng-click="change2()" value="change2">
<input type="button" ng-click="change3()" value="change3">
</div>
<script type="text/javascript">
angular.module('app', [])
.controller('WatchGroupController', ['$scope', function($scope) {
$scope.greeting = 'Hello, World1';
$scope.message2 = 'Hello, World2';
$scope.message3 = 'Hello, World3';
$scope.change1 = function() {
$scope.greeting = 'change!!';
};
$scope.change2 = function() {
$scope.message2 = 'change!!';
};
$scope.change3 = function() {
$scope.message3 = 'change!!';
};
$scope.result = '';
$scope.$watchGroup([
function() {
return $scope.greeting;
},
function() {
return $scope.message2;
},
function() {
return $scope.message3;
}
], function(newValue, oldValue, scope) {
scope.result = angular.toJson(newValue);
});
}]);
</script>
</body>
</html>