選択リストを使いこなす (3/6)
作成:2016-08-27 19:33
更新:2016-08-27 19:33
更新:2016-08-27 19:33
■表示項目を用意する
とりあえず、あらかじめ用意しておいたテンプレートの<select>を利用するだけならこれでOKですが、せっかくJavaScriptでコンポーネントを操作できるのですから、もう少し応用を考えてみましょう。表示する項目を、JavaScript側で操作できるようにしてみましょう。
まずは、app.component.tsのスクリプトからです。下のリスト欄にサンプルを掲載しておきました。MyModelモデルクラスを用意し、これをmodelプロパティに代入しておきます。そして、itemsというプロパティに配列を用意してあります。この配列を元に、<select>の<option>が生成されることになります。
onSubmitでは、this.model.selectでmessageのテキストを設定した後、itemsにpushで項目を追加しています。<option>の表示項目のためのデータとして用意しているitemsに項目を追加することで、表示される項目を増やしています。
こんな具合に、表示項目用の配列を用意し、その配列を操作することでリストの表示を変更できます。
まずは、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 + ')');
}
}
※関連コンテンツ