Angular 다중 선택 드롭다운
드롭다운은 모든 웹사이트에서 유비쿼터스 구성 요소입니다. 항목 목록을 필터링하는 데 사용되며 국가 목록 표시에서 제품 목록 필터링에 이르기까지 모든 용도로 사용할 수 있습니다.
이 문서는 Angular 다중 선택 드롭다운과 Angular 애플리케이션에서 이를 구현하는 방법에 관한 것입니다.
Angular의 다중 선택 드롭다운
Angular Multi-Select 드롭다운은 여러 값을 선택하기 위한 HTML 선택 태그를 대체합니다. 이 텍스트 상자 구성 요소를 사용하면 미리 결정된 가능성 목록에서 여러 값을 쓰거나 선택할 수 있습니다.
기본 제공 기능에는 데이터 바인딩, 정렬, 그룹화, 사용자 지정 값으로 레이블 지정 및 토글 모드가 포함됩니다.
ng-multi-select 지시문은 목록에서 여러 옵션을 선택할 때 유용합니다. 사용자가 선택할 수 있는 여러 옵션이 있는 드롭다운을 만들 수 있습니다.
ng-select 지시문은 항목 배열을 반환하는 표현식 값이 있는 HTML 요소의 속성으로 사용됩니다. 그러면 선택한 항목이 드롭다운 목록에 표시되고 선택하지 않은 항목은 숨겨집니다.
이 패키지에는 Angular에서 다중 선택 드롭다운을 활성화하기 위해 선택한 옵션 값을 얻기 위한 변경 이벤트도 포함되어 있습니다.
Angular에서 다중 선택 드롭다운 만들기
이 튜토리얼에서는 ng-select를 사용하여 Angular에서 다중 선택 드롭다운을 만드는 방법을 설명합니다. Angular CLI를 사용하여 프로젝트를 생성합니다.
먼저 터미널을 열고 다음 명령어를 입력하여 프로젝트를 생성합니다.
ng new angular-multi-dropdown
그런 다음 프로젝트 폴더로 이동하여 아래 명령을 입력하십시오.
ng serve
이 명령은 머신에서 개발 서버를 시작합니다. 이제 브라우저를 열고 주소 표시줄에 "localhost:4200"을 입력하십시오.
앱에서 환영 메시지가 표시되어야 합니다. 표시되지 않으면 ng serve 명령에 문제가 있거나 컴퓨터/브라우저를 다시 시작해야 합니다.
그런 다음 다음 단계를 사용하십시오.
-
ng-select지시문을div요소에 추가합니다. -
ng-model지시문을 추가하여 식의 값을 변수에 바인딩합니다. -
목록에서 하나의 옵션을 나타내는 문자열 배열인 option 요소를 추가합니다.
-
목록의 각 옵션에 대해
type = "checkbox"가 있는 입력 요소를 추가하고 위의 3단계에서 관련 문자열에 해당하는 각 확인란의 레이블 속성과 3단계의 인덱스에 해당하는 값 속성을 추가합니다(이는 숫자를 사용하지 않는 한0이 됩니다).
아래는 Angular 다중 선택 드롭다운의 코드 예입니다.
타이프스크립트 코드:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
dropdownList: { id: number; itemName: string; }[];
selectedItems: { id: number; itemName: string; }[];
dropdownSettings: { singleSelection: boolean; text: string; selectAllText: string; unSelectAllText: string; enableSearchFilter: boolean; classes: string; };
ngOnInit() {
this.dropdownList = [
{ id: 1, itemName: 'Netherlands' },
{ id: 2, itemName: 'Pakistan' },
{ id: 3, itemName: 'Australia' },
{ id: 4, itemName: 'USA' },
{ id: 5, itemName: 'Canada' },
];
this.selectedItems = [
{ id: 2, itemName: 'Pakistan' },
];
this.dropdownSettings = {
singleSelection: false,
text: 'Select Countries',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
enableSearchFilter: true,
classes: 'myclass custom-class'
};
}
onItemSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any) {
console.log(items);
}
onDeSelectAll(items: any) {
console.log(items);
}
}
HTML 코드:
<h2>Example of Angular Multi Select Dropdown</h2>
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook