使用angularjs为selectbox添加$ watchGroup

时间:2016-07-28 08:35:32

标签: angularjs angular-material

我的$ watchGroup有多个选择框的问题。我有两个选择框,我想添加$ watchers。

我尝试了以下方式,但没有选择框的工作观察者,

controller.js

"^([0-9A-Fa-f]{2}\\s[:-]\\s){5}([0-9A-Fa-f]{2})$"

application.html

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

1 个答案:

答案 0 :(得分:1)

我就是这样做的 - 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);
    }            
});