javascript - angular2-multiselect 下拉选择单击 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 是来自后端的列表 evrything 工作正常,除了 dropDown 中的复选框。我无法选择 1 个复选框,因为它在单击 1 cb 时也选择了所有复选框。
解决方案
您可以使用“ng-multiselect-dropdown”完成
安装 :
npm install ng-multiselect-dropdown
然后将其包含在您的模块中(请参阅 app.module.ts):
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
// ...
@NgModule({
imports: [
NgMultiSelectDropDownModule.forRoot()
// ...
]
// ...
})
export class AppModule {}
用法
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 代码:
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>
有关更多详细信息,请查看 URL - https://www.npmjs.com/package/ng-multiselect-dropdown
推荐阅读
- c# - 将月份数转换为字符串时出错:无法识别方法“System.String ToString(Int32)”
- rest - RAML 建模中的抽象类或接口
- python - 如何使用存储在变量中的数字作为子图
- c++ - OpenEXR 到 QImage 的转换
- c - c系统调用connect()挂在客户端(网络编程)
- sql - 聚合查询中的非分组列
- python - 如何返回一个只包含可以形成有效整数或浮点数的字符的字符串?
- apostrophe-cms - 从客户端渲染一个 nunjucks 模板
- python - 随着时间的推移将观察结果扁平化为单行
- loops - 在 v-for 循环中调用方法