Angular ドロップダウンで選択されたオプション

Angular ドロップダウンで選択したオプションを設定する方法、オプションの配列から選択したオプションを設定する方法、およびオプションが Angular で動的である場合に選択したオプションを設定する方法を紹介します。

Angular ドロップダウンで選択したオプションを設定する

この記事では、Angular ドロップダウンに選択したオプションの設定について説明します。複数のオプションを含むドロップダウンを作成する場合、オプションは自動的に選択されません。

したがって、最初にドロップダウンを作成して選択したオプションを設定し、オプションが静的または動的である場合、またはオプションの配列がある場合に、選択したオプションを設定するための最良の方法についてさまざまなシナリオについて説明します。

app.component.html で、select フォームを作成します。

# 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 で選択されたオプションとして任意のオプションを選択できます。

出力：

オプションの配列から選択したオプションを設定する

オプションの配列からデフォルト値を設定する方法について説明します。

まず、2つの変数を作成します。ドロップダウンのデフォルトオプションである 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 に select フォームを作成します。

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

このコードでは、[selected] を ngDropdown に設定していることがわかります。したがって、いずれかのオプションが ngDropdown と同じ場合に自動的に選択されます。

出力：

動的値から選択されたオプション

オプションに動的な値がある場合は、選択したオプションの設定について説明します。まず、2つの変数を作成します。1つは select フォームのデフォルトオプションである ngDropdown で、もう 1つはドロップダウンオプションに表示するすべての値を持つ ngOptions です。

動的な値があることがわかっているので、乱数配列を作成し、その配列の 2 番目の項目に選択したオプションを設定しましょう。

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

出力：

したがって、その配列の 2 番目の項目が選択されたオプションとして設定されていることがわかります。これは、配列のインデックスを変更することで変更できます。

このチュートリアルでは、Angular ドロップダウンで選択したオプションを設定する方法を説明しました。また、値が静的、動的、または配列の場合にオプションを選択する 3つの異なるシナリオについても説明しました。