Angular 드롭다운에서 선택한 옵션

Angular 드롭다운에서 선택한 옵션을 설정하고, 옵션 배열에서 선택한 옵션을 설정하고, Angular에서 옵션이 동적인 경우 선택한 옵션을 설정하는 방법을 소개합니다.

Angular 드롭다운에서 선택한 옵션 설정

이 문서에서는 Angular 드롭다운에 대해 선택한 옵션을 설정하는 방법에 대해 설명합니다. 여러 옵션이 있는 드롭다운을 만들 때 옵션이 자동으로 선택되지 않습니다.

따라서 먼저 드롭다운을 만들고 선택한 옵션을 설정하고 옵션이 정적이거나 동적이거나 옵션 배열이 있는 경우 선택한 옵션을 설정하는 가장 좋은 방법에 대해 다양한 시나리오를 논의합니다.

app.component.html에서 선택 양식을 만듭니다.

# angular
<select [(ngModel)]='ngDropdown' name="dropdownOption" id="dropdownOption" class='form-control'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

이 코드에서 볼 수 있듯이 [(ngModel)]를 사용하여 FormControl 인스턴스를 생성하고 이를 양식 제어 요소에 바인딩합니다.

드롭다운 양식을 개선하기 위해 app.component.css에 일부 CSS를 추가합니다.

# angular
.form-control{
  padding: 5px 10px;
  background-color: rgb(52, 119, 179);
  color: white;
  border-color: black;
  width: 100px;
  height: 30px;
}
option:hover{
  background-color: white;
  color: rgb(52, 119, 179);
}

출력:

옵션이 선택되지 않은 것을 볼 수 있지만 클릭하면 모든 옵션이 나타납니다.

옵션을 선택된 것으로 설정하려면 app.component.ts의 ngDropdown 변수에 값을 할당할 수 있습니다. app.component.html의 코드를 보면 [(ngModel)]='ngDropdown' 변수가 이미 할당되어 있음을 알 수 있습니다.

1을 기본값으로 설정해 보겠습니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngDropdown = 1;
}

선택한 옵션을 할당한 후 드롭다운에 1이 선택된 옵션으로 표시됩니다. 그런 식으로 Angular에서 선택한 옵션으로 모든 옵션을 선택할 수 있습니다.

출력:

옵션 배열에서 선택한 옵션 설정

옵션 배열에서 기본값을 설정하는 방법에 대해 설명합니다.

우선, 드롭다운의 기본 옵션인 ngDropdown, 두 번째 변수는 드롭다운 옵션에 표시할 모든 옵션이 있는 ngOptions의 두 가지 변수를 만듭니다.

따라서 app.component.ts에 이 코드를 추가해 보겠습니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [1,2,3,4,5,6,7,8,9,10]
  ngDropdown = 1;
}

ngOptions 배열에서 1에서 10까지 값을 설정합니다. ngDropdown에서 1을 기본값으로 설정했습니다.

app.component.html에서 선택 양식을 만듭니다.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

이 코드에서 [selected]를 ngDropdown으로 설정하여 옵션이 ngDropdown과 같을 때 자동으로 선택됩니다.

출력:

동적 값에서 선택한 옵션

옵션에 대한 동적 값이 있는 경우 선택한 옵션 설정에 대해 논의합니다. 먼저 두 개의 변수를 생성합니다. 하나는 선택 양식의 기본 옵션인 ngDropdown이고 두 번째는 드롭다운 옵션에 표시하려는 모든 값을 포함하는 ngOptions입니다.

동적 값이 있을 것이라는 것을 알고 있으므로 난수 배열을 갖고 해당 배열의 두 번째 항목에 대해 선택된 옵션을 설정하겠습니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ngOptions = [3,6,1,4,2,10,7,5,9,8]
  ngDropdown = this.ngOptions[1];
}

app.component.html에는 다음 코드가 있습니다.

# angular
<select class="form-control" id="DropdownOptions">
  <option
    *ngFor="let opt of ngOptions"
    [selected]="opt === ngDropdown"
    [value]="opt"
  >
    {{ opt }}
  </option>
</select>

출력:

따라서 해당 배열의 두 번째 항목이 선택된 옵션으로 설정되었음을 알 수 있습니다. 배열의 인덱스를 변경하여 이를 변경할 수 있습니다.

이 튜토리얼에서는 Angular 드롭다운에 대해 선택한 옵션을 설정하는 방법을 배웠습니다. 또한 값이 정적, 동적 또는 배열일 때 옵션을 선택하는 세 가지 시나리오에 대해 논의했습니다.