選択リストを使いこなす (2/6)
作成:2016-08-27 19:32
更新:2016-08-27 19:32
更新:2016-08-27 19:32
■モデルを使ったリストの値
では、JavaScript側を作成しましょう。下にapp.component.tsのサンプルコードを掲載しておきます。リストを選択し、ボタンをクリックすると、選択した項目が表示されます。
ここでは、MyModelというクラスを用意しています。これは、中にselectというプロパティを１つ用意してあります。
AppComponentクラスでは、
onSubmitでは、modelのselectを元にmessageに値を設定しています。これで、messageが表示されている<p>タグのテキストが変更されます。
見ればわかるように、<select>を直接利用する部分は何もありません。ngModelでバインドされているモデルの値を利用しているだけですべて済んでしまいます。
ここでは、MyModelというクラスを用意しています。これは、中にselectというプロパティを１つ用意してあります。
AppComponentクラスでは、
model = new MyModel('');というようにしてMyModelインスタンスをmodelに代入しています。これが、先ほどの[(ngModel)]="model.select"でバインドされる値になります。
onSubmitでは、modelのselectを元にmessageに値を設定しています。これで、messageが表示されている<p>タグのテキストが変更されます。
見ればわかるように、<select>を直接利用する部分は何もありません。ngModelでバインドされているモデルの値を利用しているだけですべて済んでしまいます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
import { Component } from '@angular/core';
export class MyModel {
constructor(
public select: string
) {}
}
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
message = '';
model = new MyModel('');
onSubmit() {
this.message = '「' + this.model.select + '」を選択。';
}
}
※関連コンテンツ