angular2-multiselect-dropdown, Angular 2下拉菜单多选

分享于 

7分钟阅读

GitHub

  繁體
Angular 2 multiselect dropdown component for angular applications.
  • 源代码名称:angular2-multiselect-dropdown
  • 源代码网址:http://www.github.com/CuppaLabs/angular2-multiselect-dropdown
  • angular2-multiselect-dropdown源代码文档
  • angular2-multiselect-dropdown源代码下载
  • Git URL:
    git://www.github.com/CuppaLabs/angular2-multiselect-dropdown.git
    Git Clone代码到本地:
    git clone http://www.github.com/CuppaLabs/angular2-multiselect-dropdown
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/CuppaLabs/angular2-multiselect-dropdown
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Angular2多选下拉列表

    Angular 2web应用程序的多选下拉组件,易于集成和使用。

    文档|演示/Examples

    入门

    安装

    Multiselect Dropdown软件发布在npm Registry上。

    安装软件包:npm install angular2-multiselect-dropdown

    安装后,将AngularMultiSelectModule从已安装的包导入到模块中,如下所示:

    用法

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

    import { AngularMultiSelectModule } from'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
    @NgModule({
     // ... imports: [
     AngularMultiSelectModule,
     ]
     // ...})

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

    import { Component, OnInit } from'@angular/core';exportclassAppComponentimplements 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>

    模板%用于自定义菜单项的html

    <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
     <c-item>
     <ng-templatelet-item="item">
     <labelstyle="color: #333;min-width: 150px;">{{item.itemName}}</label>
     <img [src]="item.image"style="width: 30px; border: 1px solid #efefef;margin-right: 20px;" />
     <label>Capital - {{item.capital}}</label>
     </ng-template>
     </c-item> 
    </angular2-multiselect>

    模板-用于所选项目的自定义html-badge

    <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" [settings]="dropdownSettings">
     <c-badge>
     <ng-templatelet-item="item">
     <labelstyle="margin: 0px;">{{item.itemName}}</label>
     <img [src]="item.image"style="width: 16px; margin-right: 5px;" />
     </ng-template>
     </c-badge> 
    </angular2-multiselect>

    模板驱动的表单支持

    <form (ngSubmit)="onSubmit()" #loginForm="ngForm"style="border: 1px solid #ccc; padding: 10px;">
     <divclass="form-group">
     <labelfor="name">Skills</label>
     <angular2-multiselect [data]="itemList" [(ngModel)]="formModel.skills" 
     [settings]="settings" 
     (onSelect)="onItemSelect($event)" (onDeSelect)="OnItemDeSelect($event)" 
     (onSelectAll)="onSelectAll($event)" 
     (onDeSelectAll)="onDeSelectAll($event)"name="skills">
     </angular2-multiselect>
     </div>
    </form>
    formModel = {
     name:'',
     email:'ascasc@aa.com',
     skills: [{ "id":1, "itemName":"Angular" }]
     };

    Reactive 表单支持

    <form [formGroup]="userForm"novalidatestyle="border: 1px solid #ccc; padding: 10px;">
     <divclass="form-group">
     <labelfor="name">Skills</label>
     <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" 
     [settings]="settings" 
     (onSelect)="onItemSelect($event)" (onDeSelect)="OnItemDeSelect($event)" 
     (onSelectAll)="onSelectAll($event)" 
     (onDeSelectAll)="onDeSelectAll($event)"formControlName="skills">
     </angular2-multiselect>
     </div>
    </form>
    userForm: FormGroup;this.userForm=this.fb.group({
     name:'',
     email: ['', Validators.required],
     skills: [[], Validators.required]
     });

    angular  
    相关文章