[英]angular2-multiselect dropdown selects all boxes on clicking 1 checbkox
<angular2-multiselect [data]="dataList | OrderBy : 'clientName'" [(ngModel)]="selectedItems[dataList.clientId]" [settings]="dropdownSettings" name="multiSelect" (onSelect)="onItemSelect($event, dataList.clientId)" (onDeSelect)="OnItemDeSelect($event,dataList.clientId)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)" disabled> <c-item> <ng-template let-item="item"> <label style="color: #333;min-width: 160px;">{{item.clientName}}- {{item.clientId}}</label> </ng-template> </c-item> </angular2-multiselect>
dataList is the list that is coming from backend evrything is working fine except the checkbox in dropDown..i am not able to select 1 checkbox as it selects all on clicking 1 cb also. dataList 是来自后端 evrything 的列表,除了 dropDown 中的复选框外,一切正常。我无法选择 1 个复选框,因为它也选择了所有点击 1 cb。
You can accomplish with "ng-multiselect-dropdown"您可以使用“ng-multiselect-dropdown”完成
Installation :安装 :
npm install ng-multiselect-dropdown
And then include it in your module (see app.module.ts):然后将其包含在您的模块中(请参阅 app.module.ts):
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
// ...
@NgModule({
imports: [
NgMultiSelectDropDownModule.forRoot()
// ...
]
// ...
})
export class AppModule {}
Usage用法
import { Component, OnInit } from '@angular/core';
export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit() {
this.dropdownList = [
{ item_id: 1, item_text: 'Mumbai' },
{ item_id: 2, item_text: 'Bangaluru' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
];
this.selectedItems = [
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' }
];
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
}
onItemSelect(item: any) {
console.log(item);
}
onSelectAll(items: any) {
console.log(items);
}
}
HTML Code : HTML代码:
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>
For more details please check the URL - https://www.npmjs.com/package/ng-multiselect-dropdown有关更多详细信息,请查看 URL - https://www.npmjs.com/package/ng-multiselect-dropdown
u have to add primaryKey
in settings, like:您必须在设置中添加primaryKey
,例如:
this.dropdownSettings = {
singleSelection: false,
text:"Select Countries",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class",
**primaryKey**:**"your_identifier"**,
};
Related to: https://github.com/CuppaLabs/angular2-multiselect-dropdown/issues/252相关: https : //github.com/CuppaLabs/angular2-multiselect-dropdown/issues/252
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.