嵌套的SELECT选项

Question

我正在寻找一个允许用户在层次结构的下拉列表中查看元素的指令.SELECT标签支持.但这只允许2个级别.我想展示大约5个级别.对于.eg
亚洲
---日本
------东京
------冲绳

用户将能够在任何级别选择项目.

用户可以选择亚洲,日本或东京.所有这些选项都将显示在一个下拉列表中.我不是在寻找级联选择,其中您首先选择大陆,然后选择国家,然后选择城市.

对此有角度指示吗？

谢谢,
Yash

Answer 1

为什么不直接创建一个简单的AngularJS Bootstrap UI-Select,并根据其层次结构为选项提供CSS类,并编辑CSS类以匹配您的首选项.

分享UI-Select的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