ng-multiselect-dropdown与选项组

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

我认为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>

Answer 2

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

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

npm install 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);
}

}

让我知道您是否还有任何疑问。很乐意提供帮助。