AngularJS：使用ng-selected根據集合選擇多個選項

Question

我有兩個對象數組，一個數組是另一個數組的子集：

$scope.taskGroups = [
  {id: 1, name: 'group1', description: 'description1'},
  {id: 2, name: 'group2', description: 'description2'},
  {id: 3, name: 'group3', description: 'description3'}
];

$scope.selectedGroups = [
  {id: 1, name: 'group1', description: 'description1'},
  {id: 2, name: 'group3', description: 'description3'}
];

在嘗試使用ng-option失敗之后，我認為我可以創建一個函數來確定是否應該在select列表中select一個選項，這取決於我在文檔中選擇的內容：

ngSelected - 模塊中的指令ng如果ngSelected中的表達式是真實的，則設置元素上的selected屬性。

所以，我想出了這個功能：

$scope.inSelectedGroups = function(taskGroup) {
  angular.forEach($scope.selectedGroups, function(group) {
    if (taskGroup.id == group.id) {
      return true;
    }
    return false;
  });
};

並試圖在這個HTML中使用它：

<select multiple ng-model="selectedGroups" style="width: 100%" size="7">
    <option ng-repeat="taskGroup in taskGroups" value="{{taskGroup.id}}" ng-selected="inSelectedGroups(taskGroup)">{{taskGroup.name}}</option>
</select>

但是，沒有骰子-的完整列表taskGroups顯示，但selectedTaskGroups都沒有，好，選擇...

我在這里吠叫錯了嗎？

Answer 1

顯示了完整的taskGroup列表，但是，選擇了selectedTaskGroups。

我嘗試使用ngSelected屬性的解決方案，但我也沒有成功，所以我嘗試使用ngOptions而且它有效。

 angular.module('app', []).controller('TestController', ['$scope', function($scope) { $scope.taskGroups = [{ id: 1, name: 'group1', description: 'description1' }, { id: 2, name: 'group2', description: 'description2' }, { id: 3, name: 'group3', description: 'description3' }]; $scope.selectedGroups = [{ id: 1, name: 'group1', description: 'description1' }, { id: 2, name: 'group3', description: 'description3' }]; } ]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="TestController"> <select multiple="true" ng-model="selectedGroups" style="width: 100%" ng-options="taskGroup.id as taskGroup.description for taskGroup in taskGroups track by taskGroup.id" size="7"> </select> </div> 

Answer 2

請仔細查看，您將從angular.forEach參數中定義的函數返回布爾值，因此不會從inSelectedGroups函數返回任何內容

嘗試將您的功能修改為：

$scope.inSelectedGroups = function(taskGroup) {
  var flag = false;
  angular.forEach($scope.selectedGroups, function(group) {
    if (taskGroup.id == group.id) {
      flag = true;
      return;
    }
    flag = false;
    return;
  });
  return flag;
};