AngularJs で Select From Typescript のデフォルトオプション値を設定する

Muhammad Ibrahim Alvi 2024年2月15日
  1. AngularJS の属性でデフォルト値を選択する
  2. AngularJS の ngModel セレクターでデフォルト値を選択
AngularJs で Select From Typescript のデフォルトオプション値を設定する

select は、値 prop を含む n 個のオプションの子タグを含む HTML タグです。

このチュートリアルガイドでは、ユーザーが特定の定義済みの値を選択しなかった場合に、AngularJs の TypeScript からデフォルトのオプション値を選択する方法を説明します。

AngularJS の属性でデフォルト値を選択する

配列の括弧内に value 属性を設定し、ハードコートされた値を割り当てることで、select タグのデフォルト値を定義できます。

select タグのデフォルトの value は、オプション値からのみ割り当てることができます。この値は、変更イベントで呼び出される valueChanging 関数を使用して処理することもできます。

valueChanging 関数に渡されるパラメーターは、デフォルトのオプションで割り当てることができます。

<select  class='form-handler'
        (change)="valueChanging($event)" [value]='69'>
  <option value='68'>68</option>
  <option value='69'>69</option>
  <option value='70'>70</option>
</select>

VisualStudioIDE の場合 app.component.html

出力:

Visual Studio IDE app.component.html 出力

デフォルトでは、デフォルトの選択オプションを選択します。select オプションの値の中にデフォルトオプションとして値を入れることだけを覚えていれば、それは役に立ちます。

AngularJS の ngModel セレクターでデフォルト値を選択

ngModel セレクターを使用できます。これは、inputselecttextarea をバインドし、user 値を変数に保存する AngularJs のディレクティブです。

select タグには、selectValue 属性を持つ ngModel ディレクティブが含まれ、app.component.ts ファイル内には、option タグ内にあるのと同じデフォルト値が割り当てられます。

app.component.html

<select [(ngModel)]='selectValue' class='form-control'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

AngularJs で nrSelect を使用する

app.component.ts

import { Component } from '@angular/core';

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

AngularJs で nrSelect を使用する

出力:

Visual Studio IDE app.component.html 出力

Muhammad Ibrahim Alvi avatar Muhammad Ibrahim Alvi avatar

Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.

LinkedIn