選択リストを使いこなす (6/6)
作成:2016-08-27 19:42
更新:2016-08-27 19:42
更新:2016-08-27 19:42
■複数項目の処理
では、app.component.ts側の処理を行いましょう。これも下のリスト欄にサンプルを掲載ししておきます。これで、リストから複数の項目を選択してボタンを押すと、選択した項目すべてが表示されるようになります。
ここでは、モデルクラスMyModelに用意されているselectの値が、string配列に変更されています。実は、修正はたったこれだけなのです。これで、multipleで複数項目を選択可にすると、選択したすべての項目が配列としてselectに保管されるようになります。
後は、onSubmitでメッセージを表示する際、selectから順に値を取り出してテキストにまとめる処理を行っています。まぁ、単純に値を表示するだけなら、this.model.select.toString() の値をmessageに設定するだけでもいいんですが、配列の全要素を処理する例としてあえて繰り返しを使っておきました。
複数項目の選択そのものは、このように「テンプレート側で[multiple]=trueにする」「モデルクラスでバインドするプロパティを配列にする」というだけで可能になります。後は、配列の値をどう処理するかという話であり、複数項目の選択とは別のことですね。
<select>の複数項目の処理はすべてコードを書いて処理すると面倒くさいのですが、Angularならこのようにとても単純です。必要なのは、「配列を用意して処理する」ということだけ。<select>のDOMに直接触らないため、面倒な部分がすべて取り除かれていることがわかるでしょう。
ここでは、モデルクラスMyModelに用意されているselectの値が、string配列に変更されています。実は、修正はたったこれだけなのです。これで、multipleで複数項目を選択可にすると、選択したすべての項目が配列としてselectに保管されるようになります。
後は、onSubmitでメッセージを表示する際、selectから順に値を取り出してテキストにまとめる処理を行っています。まぁ、単純に値を表示するだけなら、this.model.select.toString() の値をmessageに設定するだけでもいいんですが、配列の全要素を処理する例としてあえて繰り返しを使っておきました。
複数項目の選択そのものは、このように「テンプレート側で[multiple]=trueにする」「モデルクラスでバインドするプロパティを配列にする」というだけで可能になります。後は、配列の値をどう処理するかという話であり、複数項目の選択とは別のことですね。
<select>の複数項目の処理はすべてコードを書いて処理すると面倒くさいのですが、Angularならこのようにとても単純です。必要なのは、「配列を用意して処理する」ということだけ。<select>のDOMに直接触らないため、面倒な部分がすべて取り除かれていることがわかるでしょう。
(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.forEach(item => {
this.message += ' ' + item;
});
this.message = '「' + this.message + '」を選択。';
}
}
※関連コンテンツ