vishnu vishnu - 4 months ago 11
AngularJS Question

Adding $watchGroup for selectboxes using angularjs

I have a problem with $watchGroup for multiple selectboxes. I have two select boxes which i want to add $watchers.

I tried in the following way but not working watchers for select boxes,

controller.js



$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;
}
});


application.html



<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>

Answer

This is how I would do it - CodePen

I've encountered problems before passing an object to ng-model for md-select to $watch or $watchGroup (which is what you are doing), so I use $index.

Markup

<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);
    }            
});
Comments