嵌套的SELECT選項

Question

我正在查找允許用戶在層次結構中查看下拉列表中的元素的指令。 SELECT標籤支持。但是這隻允許2個級別。我想展示大約5個關卡。例如，
亞洲
---日本
------東京
------沖繩

用戶將能夠在任何級別的選擇項目。

用戶將能夠選擇亞洲或日本或東京。所有這些選項都會顯示在一個下拉列表中。我不是在尋找一個層疊選擇，你首先選擇大陸，然後選擇國家，然後選擇城市。

有沒有這個角度指令？

謝謝
佳日

Answer 1

你爲什麼不只是做一個簡單的AngularJS引導UI-Select，並給出了選項根據自己的層次結構中的CSS類，並編輯CSS類，以符合您的喜好。

分叉的UI - 選擇Plunker和編輯它滿足您的要求，

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

參考：http://plnkr.co/edit/AYIS4Pv781ubB2mpzbCQ?p=preview

Answer 2

其他方法是使用Angular tree-selector directive。它應該工作。