Question

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

用户可以选择任何级别的项目。

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

这是否有角度指示？

谢谢，
佳日

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

Answer 2

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

嵌套的SELECT选项

2 个答案: