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

今回は、前回取り上げなかった<select>について説明しましょう。

<select>は、sizeの設定によってプルダウンメニューになったりリストになったり、あるいはmultipleで複数選択が可能になったりといろいろ使い方ができます。Angularでこの<select>を利用するにはどうすればいいのでしょうか。

まずは、「単項目のみ選択」の場合から考えてみましょう。リストを表示し、選択する場合、選択した値をどのように管理するかを考えないといけません。Angularでは、「ngModel」を使ってそれを行います。

簡単なテンプレートのサンプル（app.component.html）を下に掲載しておきましょう。これは、３つの項目からなる選択リストを表示する例です。ここでは、<select>タグを以下のように記述してあります。

<select [(ngModel)]="model.select" [size]="3">

これが、今回のポイントです。[(ngModel)]が、ngModelの設定を示す属性です。ここではmodel.selectという値が指定されていますが、これは「JavaScript側にあるmodelというオブジェクトのselectプロパティ」を割り当てていることを示します。このngModelにバインドしたものが、<select>で選択した値を保管するものとなります。

また、ここでは[size]という属性もあります。これは、表示する項目数を示すsize属性に相当するものです。そして最後に送信用のボタンに (click)="onSubmit();" と指定し、ボタンを押したらonSubmitを呼び出して実行するようにしてあります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<div class="rect">
<h1>AppComponent</h1>
<p>{{message}}</p>
<form>
    <select [(ngModel)]="model.select" [size]="3">
        <option >One</option>
        <option >Two</option>
        <option >Three</option>
    </select>
    <input type="button" (click)="onSubmit();" value="click">
</form>
</div>