読者です 読者をやめる 読者になる 読者になる

ECサイト運営開発記

PHPフレームワーク Laravelの使い方を中心とした通販サイトの開発日記

AngularJS のng-optionsのvalue値でデータ型が表示されてしまったら

AngulrJSでng-optionsを使ってると、value値にデータ型も一緒に表示されてしまい、期待通りの動きになってくれなかった。

  • http requestで取得したJSONデータ
    • 取得したJSONデータは$scope.itemListにセット。
[
  {"item_id":"ITM000000001","item_name":"バタークリームサンド"},
  {"item_id":"ITM000000002","item_name":"ワッフルクッキー"},
  {"item_id":"ITM000000003","item_name":"マカロン"},
  {"item_id":"ITM000000004","item_name":"ココナッツ クッキー"}
]
<select ng-model="selectedItem" ng-options="item.item_name for item in itemList"></select>

しかし、このコードだと出力されるHTMLは以下の様に、データ型も一緒に表示される上、空のデータに対してselectedが割り当てられてしまう。

<select ng-model="selectedItem" ng-options="item.item_name for item in itemList">
<option value="?" selected="selected"></option>
<option value="string:ITM000000001" label="バタークリームサンド" selected="selected">バタークリームサンド</option>
<option value="string:ITM000000002" label="ワッフルクッキー">ワッフルクッキー</option>
<option value="string:ITM000000003" label="マカロン">マカロン</option>
<option value="string:ITM000000004" label="ココナッツ クッキー">ココナッツ クッキー</option>
</select>

しかし、string:というデータ型が邪魔である。
これをどうやって解決するのか?

  • 解決策その1
    • ng-optionsをやめて、ng-repeatを使う。
<select ng-model="selectedItem">
<option ng-repeat="item.item_name for item in itemList" value="{{item.item_id}}">{{item.item_name}}</li>
</select>
  • 解決策その2
    • track by句を使う
      • 重複した配列を出力する際に使われるキーワードらしいですが、この句を使うと、データ型を省略した文字列で表示されます。どういう理屈かはわかりません。
<select ng-model="selectedItem" ng-options="item.item_name for item in itemList track by item.item_id"></select>
  • 空のselectedの解決策
    • JSONを取得した段階でselectedItemにitemList[0]を指定しておく。またはng-initにて、初期値を指定。


出力されるHTML。

<select ng-model="selectedItem" ng-options="item.item_name for item in itemList track by item.item_id">
<option value="ITM000000001" label="バタークリームサンド" selected="selected">バタークリームサンド</option>
<option value="ITM000000002" label="ワッフルクッキー">ワッフルクッキー</option>
<option value="ITM000000003" label="マカロン">マカロン</option>
<option value="ITM000000004" label="ココナッツ クッキー">ココナッツ クッキー</option>
</select>

AngularJSは高機能なだけに、使いこなすのが難しいです。