libro
www.tuyano.com
初心者のためのAngular2入門

選択リストを使いこなす (2/6)

作成:2016-08-27 19:32
更新:2016-08-27 19:32

■モデルを使ったリストの値

では、JavaScript側を作成しましょう。下にapp.component.tsのサンプルコードを掲載しておきます。リストを選択し、ボタンをクリックすると、選択した項目が表示されます。

ここでは、MyModelというクラスを用意しています。これは、中にselectというプロパティを1つ用意してあります。

AppComponentクラスでは、
model = new MyModel('');
というようにしてMyModelインスタンスをmodelに代入しています。これが、先ほどの
[(ngModel)]="model.select"
でバインドされる値になります。

onSubmitでは、modelselectを元にmessageに値を設定しています。これで、messageが表示されている<p>タグのテキストが変更されます。

見ればわかるように、<select>を直接利用する部分は何もありません。ngModelでバインドされているモデルの値を利用しているだけですべて済んでしまいます。

※プログラムリストが表示されない場合

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 + '」を選択。';
    }
}


※関連コンテンツ

「初心者のためのAngular2入門」に戻る