콤보박스 기능

    Ignite UI for Angular 데이터 및 값 바인딩, 사용자 정의 값, 필터링, 그룹화 등을 포함한 여러 기능을 노출합니다.

    Angular ComboBox Features Example

    다음 데모에서는 런타임에 활성화/비활성화되는 콤보박스 기능 중 일부를 보여줍니다.

    Usage

    First Steps

    콤보박스 구성요소를 시작하려면 먼저 IgxComboModule 당신의 app.module.ts 파일. 우리 샘플은 또한 igx 스위치 콤보박스 속성 값을 전환하는 구성요소이므로 IgxSwitchModule 또한:

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

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

    Template Configuration

    <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>

    Component Definition

    ​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' : '';
    }

    특징

    Data Binding

    다음 코드 조각은 로컬 데이터 소스에 바인딩된 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 엔터티가 대신 사용됩니다.

    콤보박스 구성 요소를 원격 데이터와 바인딩하는 방법에 대한 자세한 내용은 ComboBox 원격 바인딩 항목을 참조하세요.

    Custom Overlay Settings

    콤보박스 구성 요소를 사용하면 사용자가 항목 목록이 표시되는 방식을 변경할 수 있습니다. 이는 사용자 정의 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를 기본 위치 전략으로 사용합니다.

    필터링

    기본적으로 콤보 상자 필터링은 활성화되어 있습니다. 필터링 가능 속성을 false로 설정하여 비활성화할 수 있습니다.

    검색 대소문자 구분을 활성화하면 필터링 옵션이 더욱 향상될 수 있습니다. 검색 입력에 대소문자 구분 아이콘을 표시하려면 showSearchCaseIcon 속성을 true로 설정합니다.

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

    Custom Values

    ​AllowCustomValues 속성은 사용자 지정 값을 컬렉션에 추가할 수 있는지 여부를 제어합니다. 활성화된 경우 누락된 항목이 콤보 상자의 UI를 사용하여 포함될 수 있습니다.

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

    Search Input Focus

    콤보박스의 autoFocusSearch 속성은 콤보박스의 드롭다운 목록이 열릴 때 검색 입력이 포커스를 받아야 하는지 여부를 제어합니다. 기본적으로 속성은 true로 설정됩니다. false로 설정하면 포커스가 콤보 상자의 항목 컨테이너로 이동합니다. 모바일 장치의 경우 콤보 상자의 드롭다운 목록을 열 때 소프트웨어 키보드가 표시되는 것을 방지하는 데 사용할 수 있습니다.

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

    Disable ComboBox

    다음 코드를 사용하여 콤보박스를 비활성화할 수 있습니다.

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

    Grouping

    콤보박스의 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 Summary

    사용된 관련 API가 포함된 추가 구성 요소 및/또는 지시어:

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.