angular material - Adding $watchGroup for selectboxes using angularjs -
i have problem $watchgroup multiple selectboxes. have 2 select boxes want add $watchers.
i tried in following way not working watchers 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>
this how - codepen
i've encountered problems before passing object ng-model
md-select
$watch or $watchgroup (which doing), 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
Post a Comment