Zagnieżdżone opcje SELECT

Question

Szukam dyrektywy, która pozwala użytkownikowi widzieć elementy w liście rozwijanej w hierarchii. Tag SELECT obsługuje. Ale to pozwala tylko na 2 poziomy. Chciałbym pokazać około 5 poziomów. Dla .e.g.
Azja
--- Japonia
------ Tokio
------ Okinawa

Użytkownik będzie mógł wybrać element w każdym z poziomów.

Użytkownik będzie mógł wybrać Azję, Japonię lub Tokio. Wszystkie te opcje pojawią się w jednym menu rozwijanym. Nie szukam Cascading Select, w którym najpierw wybierasz Kontynent, potem Kraj, a potem miasto.

Czy istnieje do tego dyrektywa kątowa?

Dzięki
Yash

Answer 1

Dlaczego nie można po prostu zrobić prosty angularjs Bootstrap UI-Select i dać opcjach klasę CSS w oparciu o ich hierarchii i edytowania klasę CSS do własnych preferencji.

Rozwidlona Plunker z UI-Select i edytować go do własnych potrzeb,

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

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

Answer 2

Inne podejście to użycie Angular tree-selector directive. Powinno działać.