phi

I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

AngularJS tips - ng-options を使って select 要素に option 要素をぶら下げる方法

9 years ago

すべて Runstant で作ったデモがあるので, よかったら実行したりコードいじって遊んでみてください♪

配列からオプションを生成

item for item in Array という形で指定します. もっともシンプルなパターンです.

<select ng-model="year" ng-options="year for year in years"></select>  

demo

オブジェクトの配列からオプションを生成

item.keyname for item in Array という形で指定します. label と value は同じ値になります.

<select ng-model="month" ng-options="month.ja for month in months"></select>  

demo

オブジェクトの配列からオプションを生成(key, value 両方指定)

as を使うことで label と value それぞれ別の値を指定できます.

<select ng-model="month" ng-options="month.value as month.ja for month in months"></select>  

demo

未選択状態を設定する

ng-options とは別に option を入れることもできます.

<select ng-model="year" ng-options="year for year in years">  
  <option value=''>未選択</option>
</select>  

demo

デフォルト値を設定する

js 側で配列の中からデフォルト値にしたい値を model に代入すれば
デフォルト値になります.

$scope.years = [2010,2011,2012,2013,2014];
$scope.year = $scope.years[3];

demo

Reference

参考にさせていただいたサイトです.