ng使用angular中的json数据使用optgroup重复select

ng-repeat on select with optgroup using json data in angular

本文关键字：optgroup 重复 select 数据 使用 angular 中的 json ng      更新时间：2024-05-29

我有一个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"}
]

我已经设法创建了一个选择菜单，其中包括以上所有内容。

<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>

我想将类别作为optgroup包含在select中，如下所示。

<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>

这样尝试。

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>

相关文章：