将ngOptions与对象一起使用，其中键是数组并按键分组

Question

我有一个对象，其中键的值是数组：例如：

{
    key1 : [item1, item2, item3],
    key2 : [item4, item5, item6]
}

我想在选择框中显示所有'项目'，并按'键'

进行分组

如何使用ng-options执行此操作？我阅读了文档，但似乎无法弄清楚如何做到这一点。

Answer 1

选项1（ngRepeat）

假设item1，item2等是对象：

PLUNKER

app.controller('MainCtrl', function($scope) {

  $scope.rawItems = {
    key1 : [{name: 'item1'}, {name: 'item2'}, {name: 'item3'}],
    key2 : [{name: 'item4'}, {name: 'item5'}, {name: 'item6'}]
  };

});

<select
  ng-model="selectedItem"
  class="form-control"
>
  <option value=""></option>
  <optgroup ng-repeat="(groupName, items) in rawItems" label="{{groupName}}">
    <option ng-repeat="item in items" value="{{item.name}}" ng-bind="item.name"></option>
  </optgroup>
</select>

选项2（ngOptions）

首先需要在控制器内转换数组。

PLUNKER

app.controller('MainCtrl', function($scope) {

  var rawItems = {
    key1 : [{name: 'item1'}, {name: 'item2'}, {name: 'item3'}],
    key2 : [{name: 'item4'}, {name: 'item5'}, {name: 'item6'}]
  };

  $scope.groupedItems = [];
  var option;
  angular.forEach(rawItems, function(items, key){
    option = {};
    angular.forEach(items, function(item){
      item.group = key;
      $scope.groupedItems.push(item);
    });
  });

});

<select
  ng-model="selectedGroupedOption"
  ng-options="value.name as value.name group by value.group for value in groupedItems"
>
  <option>--</option>
</select>