AngularJS:セレクトボックスを出力する

goto_jp 2,483views 更新:2014年4月30日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/rcFvI

サンプル内の3つのパターンについて紹介します。

セレクトボックスを出力する

<select ng-model="user.select1" ng-options="jojo for jojo in ['jonasun','joseph','jotaro']"></select>

「ng-model」でモデルを定義し、「ng-options」で値を定義しています。
ng-option の値のみで<select>タグ内の<option>を生成してくれます。

共通のラベルを付与する

<select ng-model="user.select2" ng-options="'JOJO:'+month for month in ['jonasun','joseph','jotaro']"></select>

「ng-options」の冒頭にテキストを加えました。
そうすることで各<option>内に共通のラベルを付与できます。

選択時の値にはラベルの文字列は加わりません。

初期値を指定する

<select ng-model="user.select3" ng-options="'JOJO:'+jojo for jojo in ['jonasun','joseph','jotaro']" ng-init="user.select3='jotaro'"></select>

「ng-init」で初期選択値を指定できます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません