back

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

■表示項目を用意する

とりあえず、あらかじめ用意しておいたテンプレートの<select>を利用するだけならこれでOKですが、せっかくJavaScriptでコンポーネントを操作できるのですから、もう少し応用を考えてみましょう。表示する項目を、JavaScript側で操作できるようにしてみましょう。

まずは、app.component.tsのスクリプトからです。下のリスト欄にサンプルを掲載しておきました。MyModelモデルクラスを用意し、これをmodelプロパティに代入しておきます。そして、itemsというプロパティに配列を用意してあります。この配列を元に、<select>の<option>が生成されることになります。

onSubmitでは、this.model.selectでmessageのテキストを設定した後、itemsにpushで項目を追加しています。<option>の表示項目のためのデータとして用意しているitemsに項目を追加することで、表示される項目を増やしています。

こんな具合に、表示項目用の配列を用意し、その配列を操作することでリストの表示を変更できます。



(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('');
    items = ['One', 'Two', 'Three', 'Four', 'Five'];
    onSubmit() {
        this.message = '「' + this.model.select + '」を選択。';
        this.items.push('追加 (' + this.items.length + ')');
    }
}



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.