Nested SELECT Parameters

Question

I am looking for a directive that allows the user to see items in a hierarchy drop-down list. The SELECT tag supports. But this allows only 2 levels. I would like to show about 5 levels. For .eg
Asia
--- Japan
------ Tokyo
------ Okinawa

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

The user will be able to choose either Asia, or Japan or Tokyo. All of these options will appear in a single drop-down list. I am not looking for Cascading Select, in which you first select Continent, then country, and then city.

Is there an angular directive for this?

Thanks,
Yash

Answer 1

Why don't you just make a simple AngularJS Bootstrap UI-Select and provide CSS class parameters based on their hierarchy and edit the CSS class according to your preferences.

Launched Plunker 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; } 

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

Answer 2

Another approach is to use the Angular tree-selector directive . It should work.