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>
オブジェクトの配列からオプションを生成
item.keyname for item in Array という形で指定します. label と value は同じ値になります.
<select ng-model="month" ng-options="month.ja for month in months"></select>
オブジェクトの配列からオプションを生成(key, value 両方指定)
as を使うことで label と value それぞれ別の値を指定できます.
<select ng-model="month" ng-options="month.value as month.ja for month in months"></select>
未選択状態を設定する
ng-options とは別に option を入れることもできます.
<select ng-model="year" ng-options="year for year in years">
<option value=''>未選択</option>
</select>
デフォルト値を設定する
js 側で配列の中からデフォルト値にしたい値を model に代入すれば
デフォルト値になります.
$scope.years = [2010,2011,2012,2013,2014];
$scope.year = $scope.years[3];
Reference
参考にさせていただいたサイトです.