嵌套的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。它应该工作。