在角度應用程序中使用Ui選擇與多個類別

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

爲了以這種方式使用的用戶界面選組的，你必須調整你的數據看起來是這樣的：

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