How to display sections within a select dropdown using AngularJS? [duplicate]

问题

This question already has answers here:

Angularjs: ng-options group by (3 answers)

Working with select using AngularJS's ng-options (8 answers)

How to add a header in dropdown list (with ng-options Demo) (4 answers)

Closed last year.

There is a select dropdown that currently displays a list of values (All Car Makes). The new requirement is to have sections within the same select dropdown, so that it shows a new set of values (Common Car Makes) under a section and along with the existing (All Car Makes).

How can this be achieved using AngularJS?

Existing code :

<select ng-model="vm.vehicleSelection.selected.make" 
  ng-options="m for m in vm.vehicleSelection.makes">
  <option value="">Please select</option>
</select>

回答1:

This one worked :)

If we have a list for each section of values, we can display it as :

<select 
ng-model="vm.vehicleSelection.selected.make" >
 <option value="">Please select</option>
 <optgroup label="Common Car Makes">
  <option ng-repeat="commonMake in vm.vehicleSelection.commonMakes" ng-value="commonMake">{{commonMake}}</option>
 </optgroup>

 <optgroup label="All Car Makes">
  <option ng-repeat="make in vm.vehicleSelection.makes" ng-value="make">{{make}} 
  </option>
 </optgroup>
</select>

来源：https://stackoverflow.com/questions/51306513/how-to-display-sections-within-a-select-dropdown-using-angularjs