0

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>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Praveesh P
  • 1,399
  • 2
  • 25
  • 42
  • what have you tried so far? can you please add anything you have tried? – mast3rd3mon Jul 12 '18 at 13:07
  • Thanks @mast3rd3mon, The below code worked :) – Praveesh P Jul 12 '18 at 13:25
  • Hi @georgeawg , this is same as https://stackoverflow.com/questions/33343484/how-to-add-a-header-in-dropdown-list-with-ng-options-demo/ , But with a better heading I guess. I have posted my answer there as well. – Praveesh P Jul 13 '18 at 07:51

1 Answers1

0

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>
Praveesh P
  • 1,399
  • 2
  • 25
  • 42