0

Although this may not be the best UI implementation, I have a drop-down list with several elements that must be grouped using multiple placeholders (e.g. ----- group 1 -----). I'd like to make the place-holders un-selectable.

I found a solution for a single placeholder here: How do I add an unselectable and customizable placeholder to a select box

but it doesn't seem to be extendable to multiple place-holders.

Thanks in advance for any ideas.

Community
  • 1
  • 1
Brad
  • 41
  • 5

1 Answers1

1

Not angular specific, but can you use select option groups? 

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Check out http://www.w3schools.com/tags/tag_optgroup.asp and their demo at http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

Nicholas Hirras
  • 2,592
  • 2
  • 21
  • 28
  • I learn something new everyday (optgroup). I'll try it, thanks! – Brad Feb 01 '15 at 21:55
  • [ngOptions](https://docs.angularjs.org/api/ng/directive/ngOptions) has support for automatically adding tags. Check out the `group by` syntax. – vrmc Feb 01 '15 at 22:03