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

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

    Angular ComboBox 機能の例

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

    使用方法

    はじめに

    コンボボックス コンポーネントを初期化にするには、まず 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 エンティティが項目テキストとして使用されます。

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

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

    コンボボックス コンポーネントでは、ユーザーが項目リストの表示方法を変更できます。これを行うには、カスタム 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'
    
    export class ComboDemo {
        ...
        public groupSortingDirection: SortingDirection = SortingDirection.Asc;
    }
    

    API まとめ

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

    その他のリソース

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