ng-multiselect-下拉列表与选项组

Question

我正在尝试在ng-multiselect-dropdown中对我的选项进行分组。有什么办法，我找不到任何参考。请参阅我的代码，如下所示。。.html

<ng-multiselect-dropdown [placeholder]="'Select one'" [data]="mutiData" [settings]="multiDataSettings">
</ng-multiselect-dropdown>

.ts

this.multiData = [
{ id: '1', value: 'A one', 'group':'A' },
{ id: '2', value: 'A two', 'group':'A' },
{ id: '3', value: 'B one', 'group':'B' },
];
this.multiDataSettings = {
singleSelection: true,
idField: 'id',
textField: 'value',
itemsShowLimit: 1,
groupBy: "group",
};

Answer 1

这是 Angular 非常轻量级的多选 dropdwon 库。它提供了广泛的功能，如分组依据，搜索，自定义搜索，虚拟滚动等。 您可以参考： https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby

您可以使用以下命令导入库：

npm 安装 Angular2-multiselect-dropdown

将 AngularMultiSelectModule 导入 app.module.ts 中的 NgModule：

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
@NgModule({
// ...
imports: [
AngularMultiSelectModule,
]
// ...
});

在模板中添加以下组件标记：

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
(onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>

在组件中添加以下代码：

export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
this.itemList = [
{ "id": 1, "itemName": "India", "category": "asia" },
{ "id": 2, "itemName": "Singapore", "category": "asia pacific" },
{ "id": 3, "itemName": "Germany", "category": "Europe" },
{ "id": 4, "itemName": "France", "category": "Europe" },
{ "id": 5, "itemName": "South Korea", "category": "asia" },
{ "id": 6, "itemName": "Sweden", "category": "Europe" }
];
this.selectedItems = [
{ "id": 1, "itemName": "India" },
{ "id": 2, "itemName": "Singapore" },
{ "id": 4, "itemName": "Canada" }];
this.dropdownSettings = { 
singleSelection: false, 
text:"Select Countries",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
groupBy: "category"
};            
}
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}

}

如果您仍有任何疑问，请告诉我。很乐意帮忙。

Answer 2

我不这么认为ng-multiselect-dropdown提供这个。

如果你想这样做，那么你可以尝试这个而不是ng-multiselect-dropdown

<select id="food" name="food" multiple>
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>