I want to modify the variables that are being monitored.
JS:
var app = angular.module('myApp', []);
app.controller('MainController',
function($scope) {
$scope.current = null;
$scope.select = function(item) {
$scope.current = item;
};
var watch = ['current'];
$scope.$watchGroup(watch, function() { // This does not work
if ($scope.current !== null) {
watch = ['current'];
Array.prototype.push.apply(watch, $scope.current.watch);
$scope.current.callBack();
}
});
$scope.list = [
{
name: 'test-A',
watch: ['a'],
callBack: function() {
$scope.value = 2 * $scope.a;
}
},
{
name: 'test-B',
watch: ['b'],
callBack: function() {
$scope.value = 3 * $scope.b;
}
}
];
});
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493a273a273e">[email protected]</a>" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="jquery" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efde0fde0f9">[email protected]</a>" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcac5ccdec7cad985c1d8eb9a859d859d">[email protected]</a>" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
{{current != null ? current.name : 'DropDown'}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="item in list">
<a href="javascript:void(0)" ng-click="select(item)">{{item.name}}</a>
</li>
</ul>
</div>
When "test-A" is selected, result is 2 times of A.
<br> When "test-B" is selected, result is 3 times of B.
<br>
<br>
<br>
<form class="form-inline">
<div class="form-group">
<label>A</label>
<input type="text" class="form-control" ng-model="a">
</div>
<div class="form-group">
<label>B</label>
<input type="text" class="form-control" ng-model="b">
</div>
</form>
<br> result : {{value}}
<br>
</body>
</html>
This is Plunker example.
The result should be 2 times of A when test-A is selected, should be 3 times of B when test-B is selected.
I wish to change which variables are being watched. However, the method indicated in the line This does not work is ineffective. The $watchGroup only triggers when current is altered. I intend for this $watchGroup to trigger when either current or a is modified if test-A is chosen, and when current or b is changed if test-B is selected.
I am aware that
$scope.$watchGroup(['a', 'b', 'current'], ...$watchGroup when test-A is picked and b is updated, and vice versa.
How can I adjust which variables are monitored?