Open Source

ComboBox (コンボボックス) 機能

Ignite UI for Angular ComboBox コントロールは、データと値のバインディング、カスタム値、フィルタリング、グループ化など複数の機能を公開します。

Angular ComboBox 機能の例

以下のデモは、ランタイムで有効または無効にできるいくつかのコンボボックス機能を示します。

使用方法

はじめに

コンボボックスコンポーネントを初期化にするには、まず IgxComboModule を app.module.ts ファイルにインポートします。サンプルは igx-switch コンポーネントを使用してコンボボックスのプロパティの値をトグルしているため、IgxSwitchModule も必要です。

import { IgxComboModule } from 'igniteui-angular/combo';
import { IgxSwitchModule } from 'igniteui-angular/switch';
// import { IgxComboModule, IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxComboModule,
        IgxSwitchModule,
        ...
    ]
})
export class AppModule {}

テンプレートの構成

<div class="combo-container">
    <igx-combo #combo [data]="lData" displayKey="field" valueKey="field"
        [allowCustomValues]="customValues"
        [disableFiltering]="disableFiltering"
        [showSearchCaseIcon]="showSearchCaseIcon"
        [disabled]="disabled">
    </igx-combo>
</div>
<div class="switch-container">
    <igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch>
    <igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch>
    <igx-switch [(ngModel)]="disabled">Disable Combo</igx-switch>
    <igx-switch [(ngModel)]="disableFiltering">Disable Filtering</igx-switch>
    <igx-switch *ngIf="!disableFiltering" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch>
</div>

コンポーネント定義

グループ化は、groupKey プロパティを対応するデータソースエンティティに設定、または空文字列に設定して有効または無効にできます。

    @ViewChild('combo', { read: IgxComboComponent }) public combo: IgxComboComponent;

    public disableFiltering = false;
    public showSearchCaseIcon = true;
    public customValues = true;
    public disabled = false;

    public enableGroups(event) {
        this.combo.groupKey = event.checked ? 'region' : '';
    }

機能

データバインディング

以下のコードスニペットは、ローカルデータソースにバインドされた igx-combo の基本的な使用方法を示しています。valueKey は、コンボボックスの選択に保存されるデータエントリのプロパティを指定し、displayKey は、コンボボックステキストに使用されるプロパティを指定します。

<igx-combo [data]="lData" valueKey="ProductID" displayKey="ProductName"></igx-combo>

import { localData } from './local-data';

export class ComboDemo implements OnInit {
    public lData: any[];

    public ngOnInit() {
        this.lData = localData;
    }
}

displayKey プロパティが省略された場合、valueKey エンティティが項目テキストとして使用されます。

コンボボックスコンポーネントをリモートデータにバインドする方法の詳細は、コンボボックスリモートバインディングを参照してください。

カスタムオーバーレイ設定

コンボボックスコンポーネントでは、ユーザーが項目リストの表示方法を変更できます。これを行うには、カスタム OverlaySettings を定義し、それらを ComboBox の overlaySettings 入力に渡します。

export class CustomOverlayCombo {
    ...
    public customSettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(
            {
                openAnimation: scaleInCenter,
                closeAnimation: scaleOutCenter
            }),
        modal: true,
        closeOnOutsideClick: true,
    };
}

<igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>

すべてが適切に設定されると、GlobalPositionStrategy を使用してコンボボックスのリストが中央に表示されます。

コンボボックスコンポーネントは、デフォルトの配置ストラテジとして AutoPositionStrategy を使用します。

フィルタリング

コンボボックスのフィルタリングがデフォルトで有効になります。無効にするには、disableFiltering プロパティを true に設定します。

フィルタリングオプションは、検索の大文字と小文字の区別を有効にすることでさらに拡張できます。大文字と小文字を区別するアイコンを検索入力に表示するには、showSearchCaseIcon プロパティを true に設定します。

<igx-combo [disableFiltering]="true" [showSearchCaseIcon]="true"></igx-combo>

カスタム値

allowCustomValues プロパティは、カスタム値をコレクションに追加できるかどうかを制御します。有効な場合、コンボボックス UI で項目を追加できます。

<igx-combo [allowCustomValues]="true"></igx-combo>

検索入力のフォーカス

コンボボックスの autoFocusSearch プロパティは、コンボボックスのドロップダウンリストが開いたときに検索入力がフォーカスを受け取るかどうかを制御します。デフォルトで、このプロパティは true に設定されます。false に設定すると、フォーカスはコンボボックスの項目コンテナーに移動します。モバイルデバイスでは、コンボボックスのドロップダウンリストを開くときにソフトウェアキーボードがポップアップしないようにするために使用できます。

<igx-combo [autoFocusSearch]="false"></igx-combo>

ComboBox の無効化

以下のコードでコンボボックスを無効にできます。

<igx-combo [disabled]="true"></igx-combo>

グループ化

コンボボックスの groupKey オプションを定義すると、キーに基づいて項目をグループ化します。

<igx-combo [groupKey]="'primaryKey'"></igx-combo>

グループを昇順または降順のどちらでソートするかを設定できます。デフォルトでは、ソート順序は、昇順に設定されています。

<igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo>

...
import { SortingDirection } from 'igniteui-angular/core'
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

export class ComboDemo {
    ...
    public groupSortingDirection: SortingDirection = SortingDirection.Asc;
}

API リファレンス

その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。