AngularJSのng-optionsでデフォルト値をセットする方法

AngularJSのviewの中でselect要素のoption要素でselected=selected状態になるデフォルト値をセットする方法。

Controllerの設定

viewに表示するためのデータをcontroller内で次のような連想配列を定義するとします。

controller.js

$scope.choices = [
  {value: 0, label: "大吉"},
  {value: 1, label: "中吉"},
  {value: 2, label: "吉"},　// ここをデフォルト値としてセットしたい
  {value: 3, label: "凶"},
  {value: 4, label: "大凶},
];

Viewの定義

単純に上記のchoicesを下記のようなHTMLに表示するにはいくつか方法がありますが、今回はng-optionsを使うものとします。

<select>
  <option value="0">大吉</option>
  <option value="1">中吉</option>
  <option value="2">吉</option>　　// ここをselectedにしたい
  <option value="3">凶</option>
  <option value="4">大凶</option>
</select>

このhtmlを生成するためにはhtmlで次のようなng-optionsを定義します

view.html

<select ng-options="choice.value as c.label for choice in choices">
</select>

ただし、このままだと空白の選択値がセットされ、次のようなhtmlが生成されてしまいます。

<select>
  <option value="?"></option> // どこからやってきた？
  <option value="0">大吉</option>
  <option value="1">中吉</option>
  <option value="2">吉</option>　　// ここをselectedにしたい
  <option value="3">凶</option>
  <option value="4">大凶</option>
</select>

ng-optionsでデフォルト値をセット

何故か前述のng-optionsではchoice.valueがPOST時に渡されません。
（まだ調べきれていません。）

なので、まずcontrollerに一行追加します。

controller.js

$scope.choices = [
  {value: 0, label: "大吉"},
  {value: 1, label: "中吉"},
  {value: 2, label: "吉"},　// ここをデフォルト値としてセットしたい
  {value: 3, label: "凶"},
  {value: 4, label: "大凶"},
];

$scope.choice = $scope.choices[2];  // ここを追加

次にhtml内のselect要素を次のように変えます。

<select ng-model="choice" ng-options="choice as c.label for choice in choices">
</select>

これでデフォルト値がセットされます。

補足

ただし、このままでは連想配列のオブジェクトがcontrollerに渡されてしまうので、mongooseにString型のためのデータを渡すためにcontrollerでは次のように定義しておくといいです。

controller.js

var choicedData = new Choice{
  choice: this.choice.value
};

モデルはこんな感じです。

model.js

var Choice = new Schema({
  choice: {
    type  : String,
    defult: '',
    trim  : false
  }
});