Nested SELECT options

Question

I am looking for a directive that allows the user to see elements in a dropdown in a hierarchy. The SELECT tag supports . But this allows only 2 levels. I would like to show about 5 levels. For .e.g.
Asia
---Japan
------Tokyo
------Okinawa

The user will be able to select an item at any of the levels.

The user will be able to select either Asia or Japan or Tokyo. All these options will appear in a single dropdown. I am not looking for a Cascading Select wherein you first choose the Continent, then the Country, then the city.

Is there an angular directive for this?

Thanks,
Yash

Solution

Why don't you just make a simple AngularJS Bootstrap UI-Select, and give the options a CSS Class based on their hierarchy, and edit the CSS Class to match your preferences.

Forked the Plunker of UI-Select and edited it for your requirements,

HTML:

<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search" >
      <span ng-bind-html="country.name | highlight: $select.search" ng-class="country.css_class"></span>
    </ui-select-choices>
  </ui-select>

Javascript:

 $scope.countries = [ // Taken from https://gist.github.com/unceus/6501985
    {name: 'Asia', code: 'AS', css_class: 'hierarchy1'},
    {name: 'Japan', code: 'JP', css_class: 'hierarchy2'},
    {name: 'Tokyo', code: 'JP-TK', css_class: 'hierarchy3'},
    {name: 'Okinawa', code: 'JP-OK', css_class: 'hierarchy3'},
    {name: 'India', code: 'IN', css_class: 'hierarchy2'},
    {name: 'Mumbai', code: 'IN-MU', css_class: 'hierarchy3'},
    {name: 'Kolkata', code: 'IN-KL', css_class: 'hierarchy3'},
    {name: 'Europe', code: 'AS', css_class: 'hierarchy1'},
    {name: 'Germany', code: 'JP', css_class: 'hierarchy2'},
    {name: 'Berlin', code: 'JP-TK', css_class: 'hierarchy3'}
  ];

CSS:

/*Custom hierarchial classes*/

.hierarchy1{
  background:#bbb;
  color:red;
}

.hierarchy2{
  background:#ddd;
  color:blue;
  margin-left:5px;
}

.hierarchy3{
  background:#fff;
  color:green;
   margin-left:10px;
}

Refer: http://plnkr.co/edit/AYIS4Pv781ubB2mpzbCQ?p=preview