PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

初心者のためのAngular2入門:

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

作成:2016-08-27 19:30
更新:2016-08-27 19:30
■選択リストとngModel
今回は、前回取り上げなかった<select>について説明しましょう。

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

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

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

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

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



 

※プログラムリストが表示されない場合

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>


 


「初心者のためのAngular2入門」に戻る



※その他のコンテンツ