Nested SELECT options

Question

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

http://stackoverflow.com/questions/18723399/angularjs-cascading-select-dropdowns - This is called a cascading select — SoluableNonagon, Oct 08 '14 at 16:28
I worked on a similar directive, what you are really looking for is "cascading selects". Here is one I came up with: http://plnkr.co/edit/AnkWlneZCuKe39mafCsn?p=preview — SoluableNonagon, Oct 08 '14 at 16:29
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. — Yash, Oct 09 '14 at 05:08
Could you give us the HTML / Angular directive code you've tried so far? — Jhecht, Oct 09 '14 at 05:25

score 8 · Accepted Answer · answered Oct 09 '14 at 05:48

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

This is actually a very good approach. Unfortunately, if you enter a search search text, only items matching the filter text are shown which makes it impossible to identify to which parent a specific item belongs. An actual hierarchical select usually displays all ancestors of the filtered items. — Ole, Jan 26 '15 at 15:42
@Ole we can do that, will have to modify the countries array to add a property 'parent' to mention the parent of the item, and create a custom filter function to filter the parents accordingly — Sameer Shemna, Jan 27 '15 at 16:53

score 0 · Answer 2 · answered Sep 09 '16 at 11:40

0

Other approach is use Angular tree-selector directive. It should work.

answered Sep 09 '16 at 11:40

V-Q-A NGUYEN

1,497
16
19

Nested SELECT options

2 Answers2