コンボ機能

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

    Angular コンボ機能の例

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

    使用方法

    はじめに

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

    import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';
    
    @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 エンティティが項目テキストとして使用されます。

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

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

    Combo コンポーネントでは、ユーザーが項目リストの表示方法を変更できます。これを行うには、カスタム OverlaySettings を定義し、それらを Combo の 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

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

    フィルタリング

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

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

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

    カスタム値

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

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

    検索入力のフォーカス

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

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

    コンボの無効化

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

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

    グループ化

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

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

    API まとめ

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

    その他のリソース

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