使用 angularjs 为选择框添加 $watchGroup

Question

我对多个 selectbox 的 $watchGroup 有疑问。我有两个 select 框，我想添加 $watchers。

我尝试了以下方式，但没有为 select 个盒子工作观察者，

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

使用 angularjs 为选择框添加 $watchGroup

Adding $watchGroup for selectboxes using angularjs

angularjs

angular-material

controller.js

application.html