多选插件Angular 2 MultiSelect Dropdown

最新推荐文章于 2024-08-24 07:51:43 发布

momo从事多年

最新推荐文章于 2024-08-24 07:51:43 发布

阅读量2.8k

点赞数

文章标签： angular2 multiselect

本文链接：https://blog.csdn.net/weixin_42057810/article/details/82977273

版权

本文介绍了Angular 2 MultiSelect Dropdown的使用，包括 Github 仓库和官网链接，提供了安装和使用步骤。建议通过GitHub下载并参考示例进行功能实现。

摘要由CSDN通过智能技术生成

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"},