以下是一个Angular 2的多选下拉菜单的代码示例:
首先,安装所需的依赖项:
npm install ng2-multiselect-dropdown --save
然后在你的组件中导入所需的模块:
import { Component } from '@angular/core';
import { IMultiSelectOption } from 'ng2-multiselect-dropdown';
@Component({
selector: 'app-multi-select-dropdown',
template: `
`
})
export class MultiSelectDropdownComponent {
dropdownOptions: IMultiSelectOption[];
selectedItems: any[];
dropdownSettings: any = {};
constructor() {
this.dropdownOptions = [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' },
{ id: 4, name: 'Option 4' },
{ id: 5, name: 'Option 5' }
];
this.selectedItems = [];
this.dropdownSettings = {
enableCheckAll: true,
buttonClasses: 'btn btn-default',
dynamicTitleMaxItems: 3,
displayAllSelectedText: true
};
}
}
在模板中,我们使用ng-multiselect-dropdown
组件来创建多选下拉菜单。我们使用[options]
属性将选项传递给下拉菜单,使用[(ngModel)]
属性将选中的项目绑定到selectedItems
数组。[settings]
属性用于配置下拉菜单的外观和行为。
请注意,此示例中使用的ng2-multiselect-dropdown
库提供了许多其他配置选项,你可以根据自己的需求进行调整。
最后,将MultiSelectDropdownComponent
添加到你的模块中的declarations
数组中,并在模板中使用
标签来使用它。
希望这个示例能帮助到你!