У меня проблема с $ watchGroup для нескольких selectboxes. У меня есть два блока выбора, которые я хочу добавить $ watchers.
Я пробовал следующим образом, но не работал наблюдателями для отдельных ящиков,
$scope.authorization = '';
$scope.authentication = '';
$scope.authorizationmodel = '';
$scope.authenticationmodel = '';
$scope.authenticationObj = [
{id: 1, authtype: 'Authentication' },
{id: 2, authtype: 'e-KYC' }
];
$scope.authorizationObj = [
{id: 1, authtype: 'Best Finger Detection' },
{id: 2, authtype: 'One Time Password' }
];
$scope.$watchGroup(['authorizationmodel', 'authenticationmodel'], function(newValues, oldValues, scope) {
console.log(newValues[0]+'--'+newValues[1]);
if(newValues[0].id !== undefined && newValues[1].id !== undefined){
$scope.authorization = newValues[0].id;
$scope.authentication = newValues[1].id;
}
});
<md-card flex="flex">
<md-card-content>
<md-input-container class="md-block" flex-gt-sm>
<label>Type of service</label>
<md-select ng-model="authenticationmodel">
<md-option ng-value="auth" ng-repeat="auth in authenticationObj">
{{auth.authtype}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Authorization via</label>
<md-select ng-model="authorizationmodel">
<md-option ng-value="auth1" ng-repeat="auth1 in authorizationObj">
{{auth1.authtype}}
</md-option>
</md-select>
</md-input-container>
</md-card-content>
</md-card>
Вот как я это сделаю - CodePen
Я столкнулся с проблемами перед передачей объекта в ng-model
для md-select
в $ watch или $ watchGroup (это то, что вы делаете), поэтому я использую $ index.
наценка
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-card flex="flex">
<md-card-content>
<md-input-container class="md-block" flex-gt-sm>
<label>Type of service</label>
<md-select ng-model="authenticationIndex">
<md-option ng-value="$index" ng-repeat="auth in authenticationObj">
{{auth.authtype}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Authorization via</label>
<md-select ng-model="authorizationIndex">
<md-option ng-value="$index" ng-repeat="auth1 in authorizationObj">
{{auth1.authtype}}
</md-option>
</md-select>
</md-input-container>
</md-card-content>
</md-card>
Authorization: {{authorization}}, Authentication: {{authentication}}
</div>
JS
$scope.$watchGroup(['authenticationIndex', 'authorizationIndex'], function() {
if (angular.isDefined($scope.authenticationIndex) && angular.isDefined($scope.authorizationIndex)) {
console.log($scope.authenticationObj[$scope.authenticationIndex], $scope.authorizationObj[$scope.authorizationIndex]);
$scope.authorization = $scope.authenticationObj[$scope.authenticationIndex].id;
$scope.authentication = $scope.authorizationObj[$scope.authorizationIndex].id;
console.log($scope.authorization, $scope.authentication);
}
});