Yash Yash - 2 months ago 39
AngularJS Question

Nested SELECT options

I am looking for a directive that allows the user to see elements in a dropdown in a hierarchy. The SELECT tag supports . But this allows only 2 levels. I would like to show about 5 levels. For .e.g.

Asia

---Japan

------Tokyo

------Okinawa


The user will be able to select an item at any of the levels.

The user will be able to select either Asia or Japan or Tokyo. All these options will appear in a single dropdown. I am not looking for a Cascading Select wherein you first choose the Continent, then the Country, then the city.

Is there an angular directive for this?

Thanks,

Yash

Answer

Why don't you just make a simple AngularJS Bootstrap UI-Select, and give the options a CSS Class based on their hierarchy, and edit the CSS Class to match your preferences.

Forked the Plunker of UI-Select and edited it for your requirements,

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

Refer: http://plnkr.co/edit/AYIS4Pv781ubB2mpzbCQ?p=preview