Angular の複数選択ドロップダウン
ドロップダウンは、あらゆる Web サイトのユビキタス コンポーネントです。 アイテムのリストをフィルタリングするために使用され、国のリストを表示することから製品のリストをフィルタリングすることまで、何にでも使用できます。
この記事では、Angular の複数選択ドロップダウンと、それを Angular アプリケーションに実装する方法について説明します。
Angular での複数選択ドロップダウン
Angular Multi-Select ドロップダウンは、複数の値を選択するための HTML 選択タグを置き換えます。 このテキストボックス コンポーネントを使用すると、ユーザーは事前に定義された可能性のあるリストから複数の値を書き込んだり選択したりできます。
その組み込み機能には、データ バインディング、並べ替え、グループ化、カスタム値によるラベル付け、およびトグル モードが含まれます。
ng-multi-select ディレクティブは、リストから複数のオプションを選択する場合に便利です。 これにより、ユーザーが選択できる複数のオプションを含むドロップダウンを作成できます。
ng-select ディレクティブは、アイテムの配列を返す式の値を持つ HTML 要素の属性として使用されます。 選択した項目がドロップダウン リストに表示され、選択されていない項目は非表示になります。
このパッケージには、Angular で複数選択ドロップダウンを有効にするために選択されたオプション値を取得するための変更イベントも含まれています。
Angular で複数選択ドロップダウンを作成する
このチュートリアルでは、Angular で ng-select を使用して複数選択ドロップダウンを作成する方法を説明します。 Angular CLI を使用してプロジェクトを生成します。
まず、ターミナルを開き、以下のコマンドを入力してプロジェクトを生成します。
ng new angular-multi-dropdown
次に、プロジェクト フォルダー内に移動し、以下のコマンドを入力します。
ng serve
このコマンドは、マシン上で開発サーバーを起動します。 次に、ブラウザを開き、アドレスバーに"localhost:4200"と入力します。
アプリからウェルカム メッセージが表示されます。 それが表示されない場合は、ng serve コマンドで問題が発生したか、コンピューター/ブラウザーを再起動する必要があります。
その後、次の手順を使用します。
-
ng-selectディレクティブをdiv要素に追加します。 -
ng-modelディレクティブを追加して、式の値を変数にバインドします。 -
リスト内の 1つのオプションを表す文字列の配列である option 要素を追加します。
-
リスト内のオプションごとに
type = "checkbox"を持つ input 要素を追加し、上記の手順 3 で関連付けられた文字列に対応する各チェックボックスの label 属性と、手順 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>
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook