在Angular中,可以使用ng-multiselect-dropdown
库来实现带筛选器的下拉列表,并选择多个选项。
首先,使用npm安装ng-multiselect-dropdown
库:
npm install ng-multiselect-dropdown
然后,在需要使用下拉列表的组件中,导入库:
import { Component } from '@angular/core';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
dropdownList = [];
selectedItems = [];
dropdownSettings: IDropdownSettings;
constructor() {
this.dropdownList = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' }
];
this.dropdownSettings = {
singleSelection: false,
idField: 'id',
textField: 'name',
selectAllText: 'Select All',
unSelectAllText: 'Unselect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
}
}
在HTML模板中,使用ng-multiselect-dropdown
指令来创建下拉列表:
这里的dropdownList
是下拉列表中的选项数组,selectedItems
是已选中的选项数组,dropdownSettings
是下拉列表的设置。
在组件中,你可以获取已选择的选项:
onItemSelect(item: any) {
console.log(item);
}
onSelectAll(items: any) {
console.log(items);
}
以上就是使用ng-multiselect-dropdown
库实现带筛选器的下拉列表,并选择多个选项的解决方法。