İç içe geçmiş SELECT seçenekleri

Question

Kullanıcının bir hiyerarşideki açılır menüde öğeleri görmesini sağlayan bir yönerge arıyorum. SELECT etiketi destekler. Ancak bu sadece 2 seviyeye izin veriyor. Yaklaşık 5 seviye göstermek istiyorum. .e.g için.
Asya
--- Japonya
------ Tokyo
------ Okinawa

kullanıcı seviyesinde herhangi bir öğeyi seçmek mümkün olacak.

Kullanıcı Asya veya Japonya veya Tokyo'yu seçebilecek. Tüm bu seçenekler tek bir açılır menüde görünecektir. Önce Kıta'yı, sonra da Ülke'yi ve sonra şehri seçtiğiniz bir Basamaklı Seçimi aramıyorum.

Bunun için açısal bir yönerge var mı?

sayesinde
Yash

Answer 1

Neden sadece basit bir angularjs Bootstrap UI-Select yapmak ve seçenekler onların hiyerarşiye dayalı bir CSS sınıfı verin ve kendi tercihlerinize CSS Class düzenleme yoktur.

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

bakın

UI-seç ait Plunker Çatallaşmış ve

HTML, ihtiyaçlarınız için düzenlemiş : http://plnkr.co/edit/AYIS4Pv781ubB2mpzbCQ?p=preview

Answer 2

Diğer yaklaşım Angular tree-selector directive'dur. İşe yaramalı.