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

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

Angular ComboBox 機能の例

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

使用方法

はじめに

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

import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';
// 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"
        [filterable]="filterable"
        [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)]="filterable">Enable Filtering</igx-switch>
    <igx-switch *ngIf="filterable" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch>
</div>

コンポーネント定義

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

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

    public filterable = true;
    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;
    }
}

Note

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 を使用してコンボボックスのリストが中央に表示されます。

Note

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

フィルタリング

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

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

<igx-combo [filterable]="false" [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'
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

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

API まとめ

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

IgxSwitchComponent

その他のリソース

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

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

Angular ComboBox 機能の例

使用方法

はじめに

テンプレートの構成

コンポーネント定義

機能

データ バインディング

Note

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

Note

フィルタリング

カスタム値

検索入力のフォーカス

ComboBox の無効化

グループ化

API まとめ

その他のリソース

テーマ設定

データバインディング

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