在角度应用程序中将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-select group by，您必须重组数据以使其看起来像这样：

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