Angular.jsでselectの初期値を設定する方法をメモ。
サンプルコード
まずはうまくいかなかった例です。
HTML
1 2 3 4 5 6 | <div ng-controller="select_Ctrl"> <select name="select" ng-model="select"> <option value="">-----</option> <option value="{{option.value}}" ng-repeat="option in options">{{option.name}}</option> </select></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | angular.module('app', []).controller('select_Ctrl', function($scope) { // selectに設定するoption $scope.options = [ { 'name': '高海 千歌', 'value': 0 }, { 'name': '桜内 梨子', 'value': 1 }, { 'name': '松浦 果南', 'value': 2 }, { 'name': '黒澤 ダイヤ', 'value': 3 }, { 'name': '渡辺 曜', 'value': 4 }, { 'name': '津島 善子', 'value': 5 }, { 'name': '国木田 花丸', 'value': 6 }, { 'name': '小原 鞠莉', 'value': 7 }, { 'name': '黒澤 ルビィ', 'value': 8 } ] // 初期値設定 $scope.select = 5;}); |
ng-repeatで設定した場合、初期値の設定がうまくできませんでした。
うまくいかなかった場合のデモページ
サンプルコード2
ng-repeatではなくng-optionsを使うとうまく設定できました。
HTML
1 2 3 4 5 | <div ng-controller="select_Ctrl"> <select name="select" ng-model="select" ng-options="option.value as option.name for option in options"> <option value="">-----</option> </select></div> |
JavaScriptの設定は同じなので省略します。
selectの初期値設定のデモページ
【参考サイト】
コメントが承認されるまで時間がかかります。