angularjs - キーが配列であるオブジェクトで 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>