Использование Ui-select с несколькими категориями в угловом приложении

Question

Я пытаюсь создать раскрывающийся список поиска с несколькими типами категорий с помощью ui-select. У меня возникли проблемы с попыткой выяснить, как сгладить мои данные, чтобы сделать эту работу. Я могу сделать одну категорию работы, но не кратно.

Что-то вроде этого:

Прямо сейчас мой код выглядит примерно так, что только показывает название категории:

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

Кто-нибудь должен был сделать что-то вроде этого, может кто-нибудь дать мне совет?

Answer 1

Для того, чтобы использовать UI-выберите группу, таким образом, вы должны перестроить свои данные, чтобы выглядеть примерно так:

[{ 
    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.' 
}] 

Теперь вы можете сгруппировать эти данные по «категории» параметра , вот так:

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