コンボ機能

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

デモ

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

使用方法

Ignite UI for Angular Combo を使用する前に IgxComboModuleapp.module.ts ファイルにインポートします。以下のサンプルは igx-switch を使用していますが、追加で IgxSwitchModule も必要です。

// app.module.ts

...
import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';

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

デモでは、igx-switch コンポーネントを使用して igx-combo プロパティ値を切り替えます。グループ化は、groupKey を対応するデータソース エンティティに設定、または空文字列に設定して有効または無効にできます。

<div class="combo-container">
    <igx-combo #combo [data]="lData" displayKey="field" valueKey="field"
        [allowCustomValues]="customValues"
        [filterable]="filterable"
        [disabled]="disabled">
    </igx-combo>
</div>
<div class="switch-container">
    <igx-switch [(ngModel)]="filterable">Enable Filtering</igx-switch><br />
    <igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch><br />
    <igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch><br />
    <igx-switch [(ngModel)]="disabled">Disabled</igx-switch>
</div>
    @ViewChild("combo", { read: IgxComboComponent }) public combo: IgxComboComponent;

    public filterable = true;
    public customValues = true;
    public disabled = false;

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

データ バインディング

ローカル データソースへバインドする igx-combo の基本的な使用は、valueKeydisplayKey を定義します。

<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 エンティティが代わりに使用されます。

詳細については、igx-comboリモートデータにバインドを参照してください。

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

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

// custom.component.ts
export class CustomOverlayCombo {
    ...
    public customSettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy({ openAnimation: scaleInCenter, closeAnimation: scaleOutCenter }),
        modal: true,
        closeOnOutsideClick: true,
    };
}
<!-- custom.component.html -->
<igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>

たとえば、上記の設定では、GlobalPositionStrategy を使用して、コンボのリストが中央に表示されます。

フィルタリング

コンボのフィルタリングがデフォルトで有効になります。以下のコードで無効にできます。

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

カスタム値

カスタム値が有効な場合、コンボ UI で項目を追加できます。

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

検索入力のフォーカス

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

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

無効

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

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

グループ化

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

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

API

その他のリソース

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