使用带有角度的json数据的optgroup选择ng-repeat

I have a JSON file which looks like this.

我有一个看起来像这样的JSON文件。

[
  {"id":1,"catid":1,"Cat":"Category 1","label":"Label 1"},
  {"id":2,"catid":1,"Cat":"Category 1","label":"Label 2"},
  {"id":3,"catid":2,"Cat":"Category 2","label":"Label 3"},
  {"id":4,"catid":2,"Cat":"Category 2","label":"Label 4"},
  {"id":5,"catid":2,"Cat":"Category 2","label":"Label 5"},
  {"id":6,"catid":3,"Cat":"Category 3","label":"Label 6"}
]

I have managed to create a select menu which includes all the above.

我已设法创建一个包含以上所有内容的选择菜单。

<select>
   <option ng-repeat="referral in referralList" value="{{referral.id}}">{{referral.label}}</option>
</select>

Which produces this...

<select>
  <option value="1">Label 1</option>
  <option value="2">Label 2</option>
  <option value="3">Label 3</option>
  <option value="4">Label 4</option>
  <option value="5">Label 5</option>
  <option value="6">Label 6</option>
</select>

I want to include the categories as optgroups within the select like below.

我想在以下选项中将类别作为optgroups包含在内。

<select>
  <optgroup label="Category 1">
    <option value="1">Label 1</option>
    <option value="2">Label 2</option>
  </optgroup>
  <optgroup label="Category 2">
    <option value="3">Label 3</option>
    <option value="4">Label 4</option>
    <option value="5">Label 5</option>
  </optgroup>
  <optgroup label="Category 3">
    <option value="6">Label 6</option>
  </optgroup>
</select>

1 个解决方案

#1

try like this.

试试这样。

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  
  $scope.data = [
  {"id":1,"catid":1,"Cat":"Category 1","label":"Label 1"},
  {"id":2,"catid":1,"Cat":"Category 1","label":"Label 2"},
  {"id":3,"catid":2,"Cat":"Category 2","label":"Label 3"},
  {"id":4,"catid":2,"Cat":"Category 2","label":"Label 4"},
  {"id":5,"catid":2,"Cat":"Category 2","label":"Label 5"},
  {"id":6,"catid":3,"Cat":"Category 3","label":"Label 6"}
]
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">

        <select ng-model="model" ng-options="d.label group by d.Cat for d in data track by d.id"></select> 
</div>