最近项目需要用到select多选框，故找了一些插件，最终选择了ng-multiselect-dropdown插件，下面将整个过程记录下来。
1 首先在项目文件中导入插件 npm i ng-multiselect-dropdown
2 插件的github地址为 https://github.com/NileshPatel17/ng-multiselect-dropdown
3 参考文档使用
- 在app.module.ts中导入类
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
.//...
@NgModule({
imports: [
NgMultiSelectDropDownModule.forRoot()
// ...
]
// ...
})
export class AppModule {}
4 在需要使用的界面使用
ts
dropdownList;
selectedItems = [];
constructor() { }
ngOnInit() {
this.dropdownList = [
{ id: 1, text: '百度' },
{ id: 2, text: '谷歌' },
{ id: 3, text: 'UC浏览器' },
{ id: 4, text: '360浏览器' },
{ id: 5, text: 'safari' }
];
}
html
<ng-multiselect-dropdown [placeholder]="'请选择浏览器'" [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings"
(onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
4 修改默认配置
在node_modules中找到多选插件
image.png
找到下面的配置，将其修改
修改前
this.defaultSettings = {
singleSelection: false,//单选
idField: 'id',//value
textField: 'text',//key
enableCheckAll: true,
selectAllText: 'Select All',//全选
unSelectAllText: 'UnSelect All',//取消全选
allowSearchFilter: false,
limitSelection: -1,
clearSearchFilter: true,
maxHeight: 197,
itemsShowLimit: 999999999999,//在输入框显示选择的个数
searchPlaceholderText: 'Search',
noDataAvailablePlaceholderText: 'No data available',//无数据时显示的默认
closeDropDownOnSelection: false,
showSelectedItemsAtTop: false,
defaultOpen: false //初始化默认打开下拉菜单
};
修改后
this.defaultSettings = {
singleSelection: false,
idField: 'id',
textField: 'text',
enableCheckAll: true,
selectAllText: '全选',
unSelectAllText: '取消全选',
allowSearchFilter: false,
limitSelection: -1,
clearSearchFilter: true,
maxHeight: 197,
itemsShowLimit: 1,
searchPlaceholderText: 'Search',
noDataAvailablePlaceholderText: '无数据',
closeDropDownOnSelection: false,
showSelectedItemsAtTop: false,
defaultOpen: false
};
效果如下
image.png
image.png
