如何在 angularjs 中观看两个具有独立侦听器的表达式?
How to watch two expressions which have separate listeners in angularjs?
我需要观察两个表达式,每个表达式都有一个单独的侦听器。所以我写了两个 $watch() 方法。是否可以将两者都写在一个 watch 语句中。
感谢您的回复,我的意思是说每个表达式都有一个单独的侦听器(我有两个表达式和两个侦听器,即一个侦听器用于一个表达式,另一个侦听器用于第二个表达式)那么如何实现它使用单一 watch() 方法。
您可以使用$watchGroup
或$watchCollection
创建一个包含不同表达式的数组,您将在单个监听器中获得结果:)
希望对您有所帮助:)
试试这个。
$scope.$watch('[first,second]', function () { ... }, true);
REFERENCE
https://plnkr.co/edit/JvJQ90tLcpS0x79ZnDvr?p=preview
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Controller example Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body>
<h1>Welcome Watch</h1>
<div ng-controller="SpicyCtrl">
<div>
<label>First</label>
<input type="text" ng-model="watch1" />
</div>
<br/>
<div>
<label>Second</label>
<input ng-model="watch2" />
</div>
<p>First input value{{watch1}}</p>
<p>Second input value {{watch2}}</p>
</div>
</body>
</html>
var app = angular.module('angularjs-starter', []);
app.controller('SpicyCtrl', function($scope) {
$scope.$watch('[watch1,watch2]',function(a,b,c){
if((b[0]!==undefined||a[0]!==undefined) && b[0]!==a[0]){
//functionality for first watchtrigger
alert('watch1 changed')
}
if((b[1]!==undefined||a[1]!==undefined) && b[1]!==a[1]){
//functionality for second watchtrigger
alert('watch2 changed')
}
})
});
我需要观察两个表达式,每个表达式都有一个单独的侦听器。所以我写了两个 $watch() 方法。是否可以将两者都写在一个 watch 语句中。
感谢您的回复,我的意思是说每个表达式都有一个单独的侦听器(我有两个表达式和两个侦听器,即一个侦听器用于一个表达式,另一个侦听器用于第二个表达式)那么如何实现它使用单一 watch() 方法。
您可以使用$watchGroup
或$watchCollection
创建一个包含不同表达式的数组,您将在单个监听器中获得结果:)
希望对您有所帮助:)
试试这个。
$scope.$watch('[first,second]', function () { ... }, true);
REFERENCE
https://plnkr.co/edit/JvJQ90tLcpS0x79ZnDvr?p=preview
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Controller example Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body>
<h1>Welcome Watch</h1>
<div ng-controller="SpicyCtrl">
<div>
<label>First</label>
<input type="text" ng-model="watch1" />
</div>
<br/>
<div>
<label>Second</label>
<input ng-model="watch2" />
</div>
<p>First input value{{watch1}}</p>
<p>Second input value {{watch2}}</p>
</div>
</body>
</html>
var app = angular.module('angularjs-starter', []);
app.controller('SpicyCtrl', function($scope) {
$scope.$watch('[watch1,watch2]',function(a,b,c){
if((b[0]!==undefined||a[0]!==undefined) && b[0]!==a[0]){
//functionality for first watchtrigger
alert('watch1 changed')
}
if((b[1]!==undefined||a[1]!==undefined) && b[1]!==a[1]){
//functionality for second watchtrigger
alert('watch2 changed')
}
})
});