在 angular 应用程序中将 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 分组依据，您必须将数据重组为如下所示：

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

现在您可以按参数 "category" 对这些数据进行分组，如下所示：

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

在 angular 应用程序中将 Ui-select 与多个类别一起使用

Using Ui-select with multiple categories in angular application

javascript

json

angularjs

drop-down-menu

ui-select