迹忆客 专注技术分享

下拉列表是任何网站中无处不在的组件。 它用于过滤项目列表，可用于从显示国家列表到过滤产品列表的任何事情。

本文是关于 Angular 多选下拉列表以及如何在我们的 Angular 应用程序中实现它的。

Angular 中的多选下拉列表

Angular Multi-Select Dropdown 取代了用于选择多个值的 HTML 选择标签。 此文本框组件允许用户从预先确定的可能性列表中写入或选择多个值。

其内置功能包括数据绑定、排序、分组、自定义值标签和切换模式。

ng-multi-select 指令在从列表中选择多个选项时很有用。 它允许我们创建一个包含多个选项的下拉列表，用户可以从中进行选择。

ng-select 指令用作 HTML 元素的属性，其值是返回项目数组的表达式。 选中的项目随后显示在下拉列表中，未选中的项目将被隐藏。

此包还包括用于获取所选选项值的更改事件，以启用 Angular 中的多选下拉列表。

在 Angular 中创建一个多选下拉列表

本教程将教授如何使用 ng-select 在 Angular 中创建多选下拉列表。 我们将使用 Angular CLI 来生成我们的项目。

首先，打开终端并输入以下命令生成一个项目。

$ ng new angular-multi-dropdown

接下来，进入项目文件夹并键入以下命令。

$ ng serve

此命令将在我们的机器上启动开发服务器。 现在，打开浏览器并在地址栏中输入“localhost:4200”。

您应该会在我们的应用程序中看到一条欢迎消息。 如果您没有看到，则说明 ng serve 命令出了点问题，或者您需要重新启动计算机/浏览器。

之后，使用以下步骤。

1. 将 ng-select 指令添加到 div 元素。
2. 添加 ng-model 指令以将表达式的值绑定到变量。
3. 添加 option 元素，一个字符串数组，表示列表中的一个选项。
4. 为列表中的每个选项添加一个 type = "checkbox" 的 input 元素，为每个复选框添加标签属性，对应于上面步骤 3 中的关联字符串，以及对应于其在步骤 3 中的索引的 value 属性（这将是 0 除非你使用数字）。

下面是 Angular 多选下拉列表的代码示例。

Typescript 代码:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
dropdownList: { id: number; itemName: string; }[];
selectedItems: { id: number; itemName: string; }[];
dropdownSettings: { singleSelection: boolean; text: string; selectAllText: string; unSelectAllText: string; enableSearchFilter: boolean; classes: string; };
  ngOnInit() {
    this.dropdownList = [
      { id: 1, itemName: 'Netherlands' },
      { id: 2, itemName: 'Pakistan' },
      { id: 3, itemName: 'Australia' },
      { id: 4, itemName: 'USA' },
      { id: 5, itemName: 'Canada' },
    ];
    this.selectedItems = [
      { id: 2, itemName: 'Pakistan' },
    ];
    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);
  }
}

Html 代码:

<h2>Example of Angular Multi Select Dropdown</h2>
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
    [settings]="dropdownSettings"
    (onSelect)="onItemSelect($event)"
    (onDeSelect)="OnItemDeSelect($event)"
    (onSelectAll)="onSelectAll($event)"
    (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>