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

Question

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>

what have you tried so far? can you please add anything you have tried? — mast3rd3mon
– mast3rd3mon, Commented Jul 12, 2018 at 13:07
Hi @georgeawg , this is same as stackoverflow.com/questions/33343484/… , But with a better heading I guess. I have posted my answer there as well. — Praveesh P
– Praveesh P, Commented Jul 13, 2018 at 7:51

Praveesh P · Accepted Answer · 2018-07-12 13:13:54Z

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>

answered Jul 12, 2018 at 13:13

Praveesh P

1,4592 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related