AngularJS のng-optionsのvalue値でデータ型が表示されてしまったら
AngulrJSでng-optionsを使ってると、value値にデータ型も一緒に表示されてしまい、期待通りの動きになってくれなかった。
[ {"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句を使う
- 重複した配列を出力する際に使われるキーワードらしいですが、この句を使うと、データ型を省略した文字列で表示されます。どういう理屈かはわかりません。
- 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は高機能なだけに、使いこなすのが難しいです。