Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 211
Yash Avatar asked Oct 08 '14 13:10

Yash


1 Answers

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

like image 95
Sameer Shemna Avatar answered Sep 28 '22 02:09

Sameer Shemna