How to display sections within a select dropdown u

问题:

This question already has an answer 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

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>