選択リストを使いこなす (5/6)
作成:2016-08-27 19:35
更新:2016-08-27 19:35
更新:2016-08-27 19:35
■複数の項目を選択する
これで、１つの項目だけを選択する方法はわかりました。では、multipleを使い、複数の項目選択を可能にした場合はどうするのでしょう。
これもサンプルを挙げて説明しましょう。下のリストは、app.component.htmlの内容を修正したものです。ここでは、<select>に以下のような属性を追加してあります。
これが、multiple属性を設定するものです。これは真偽値になっており、trueに設定することで、multipleがONとなります。それ以外の点は先程のサンプルと同じです。
これもサンプルを挙げて説明しましょう。下のリストは、app.component.htmlの内容を修正したものです。ここでは、<select>に以下のような属性を追加してあります。
[multiple]=true
これが、multiple属性を設定するものです。これは真偽値になっており、trueに設定することで、multipleがONとなります。それ以外の点は先程のサンプルと同じです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<div class="rect">
<h1>AppComponent</h1>
<p>{{message}}</p>
<form>
<select [(ngModel)]="model.select" [multiple]=true
[size]="items.length">
<option *ngFor="let item of items" [value]="item">{{item}}</option>
</select>
<input type="button" (click)="onSubmit();" value="click">
</form>
</div>
※関連コンテンツ