Using Ui-select with multiple categories in angular application

Question

I'm trying to create a search dropdown with multiple category types with ui-select. I'm having trouble trying to figure out how to flatten my data in order make this work. I can make one category work, but not multiples.

Something like this:

Right now my code looks something like this, which only shows the name category:

 <ui-select ng-model="data.selected">
       <ui-select-match placeholder=" ">{{$select.selected.name}}</ui-select-match>
       <ui-select-choices repeat="item in flatData | propsFilter: {name: $select.search}">
           <div ng-bind-html="item.name | highlight: $select.search"></div>
       </ui-select-choices>
 </ui-select>

Has anyone ever had to do something like this, could someone give me some advice?

galit90 · Accepted Answer · 2017-01-10 00:44:28Z

In order to use ui-select group by in this way, you'd have to restructure your data to look something like this:

[{
    category: 'Locations',
    name: 'Sydney'
},
{
    category: 'Locations',
    name: 'Hong Kong'
},
{
    category: 'Locations',
    name: 'New York'
},
{
    category: 'Names',
    name: 'Bob A.'
},
{
    category: 'Names',
    name: 'Andrew S.'
},
{
    category: 'Names',
    name: 'George M.'
}]

Now you can group this data by the parameter "category", like this:

<ui-select ng-model="data.selected">
    <ui-select-match placeholder=" ">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices group-by="flatData.category" repeat="item in flatData | propsFilter: {name: $select.search}">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

Collectives™ on Stack Overflow

Using Ui-select with multiple categories in angular application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related