多选插件Angular 2 MultiSelect Dropdown

Github：github：https://github.com/CuppaLabs/angular2-multiselect-dropdow

 官网：http://cuppalabs.github.io/components/multiselectDropdown/#Getting-Starte

安装：

  npm install angular2-multiselect-dropdown

 直接去github上clone一个样本要直观的多，运行一下就能明白大多功能的具体实现方法，也可根据需求做些许改动。

 使用：

 在app.module.ts中导入AngularMultiSelectModule 到NgModule

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

@NgModule({
 // ...
 imports: [
    AngularMultiSelectModule,
  ]
 // ...
})

在组件中声明要使用下拉组件的组件数据变量和选项。

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
    dropdownList  [];
    selectedItems  [];
    dropdownSettings  {};
    ngOnInit(){
        this.dropdownList = [
                              {"id":1,"itemName":"India"},
                              {"id":2,"itemName":"Singapore"},
                              {"id":3,"itemName":"Australia"},
                              {"id":4,"itemName":"Canada"},
                              {"id":5,"itemName":"South Korea"},
                              {"id":6,"itemName":"Germany"},
                              {"id":7,"itemName":"France"},
                              {"id":8,"itemName":"Russia"},
                              {"id":9,"itemName":"Italy"},
                              {"id":10,"itemName":"Sweden"}
                            ];
        this.selectedItems = [
                                {"id":2,"itemName":"Singapore"},
                                {"id":3,"itemName":"Australia"},
                                {"id":4,"itemName":"Canada"},
                                {"id":5,"itemName":"South Korea"}
                            ];
       this.dropdownSettings= { singleSelection:false, //是否是单选
                                text:"Select Countries",  //未做选择时框内文字                                
                                selectAllText:'Select All',//全选按钮未勾选时显示文字
                                unSelectAllText:'UnSelect All',//全选按钮勾选时显示文字
                                enableSearchFilter:true,//是否添加搜索功能
                                classes:"myclass custom-class"//添加类名
                                };            
    }
    onItemSelect(item:any){
        console.log(item);
        console.log(this.selectedItems);
    }
    OnItemDeSelect(item:any){
        console.log(item);
        console.log(this.selectedItems);
    }
    onSelectAll(items:any){
        console.log(items);
    }
    onDeSelectAll(items:any){
        console.log(items);
    }
}

在组件中添加相应模块

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
    [settings]="dropdownSettings" 
    (onSelect)="onItemSelect($event)" 
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>

 

选项配置表：

Setting	Type	Description	Default
singleSelection	Boolean	To set the dropdown for single item selection only.	false
text	String	Text to be show in the dropdown, when no items are selected.	‘Select’
enableCheckAll	Boolean	Enable the option to select all items in list	false
selectAllText	String	Text to display as the label of select all option	Select All
unSelectAllText	String	Text to display as the label of unSelect option	UnSelect All
enableSearchFilter	Boolean	Enable filter option for the list.	false
enableFilterSelectAll	Boolean	A ‘select all’ checkbox to select all filtered results.	true
filterSelectAllText	String	Text to display as the label of select all option	Select all filtered results
filterUnSelectAllText	String	Text to display as the label of unSelect option	UnSelect all filtered results
maxHeight	Number	Set maximum height of the dropdown list in px.	300
badgeShowLimit	Number	Limit the number of badges/items to show in the input field. If not set will show all selected.	All
classes	String	Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names.	’’
limitSelection	Number	Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled.	none
disabled	Boolean	Disable the dropdown	false
searchPlaceholderText	String	Custom text for the search placeholder text. Default value would be ‘Search’	‘Search’
groupBy	String	Name of the field by which the list should be grouped.	none
searchAutofocus	Boolean	Autofocus search input field	true
labelKey	String	The property name which should be rendered as label in the dropdown	itemName
primaryKey	String	The property by which the object is identified. Default is ‘id’.	id
position	String	Set the position of the dropdown list to ‘top’ or ‘bottom’	bottom
noDataLabel	String	Label text when no data is available in the list	‘No Data Available’
searchBy	Array	Search the list by certain properties of the list item. Ex: [“itemName, “id”,”name”]. Deafult is , it will search the list by all the properties of list item	[]
lazyLoading	Boolean	Enable lazy loading. Used to render large datasets.	false
showCheckbox	Boolean	Show or hide checkboxes in the list	true

更新2019.1.7

建议直接在github上下载，根据demo来获得想要实现的功能。

之前的方法，在后来发现有缺陷，搜索后选择所有匹配的选项这一功能无法启用。