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

■複数の項目を選択する

これで、１つの項目だけを選択する方法はわかりました。では、multipleを使い、複数の項目選択を可能にした場合はどうするのでしょう。

これもサンプルを挙げて説明しましょう。下のリストは、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>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail