[ドロップダウンボックス]に[データ表示形式]を適用したい。ドロップダウンボックス内に「親」をそのまま表示する必要がありますが、親子関係を示すために「子」を[タブ]で表示する必要があります。
$scope.itemlist は順番に用意されます (つまり、parenta、childa1、childa2、parentb、childb1、childb2)
HTML:
<div ng-controller="MyCtrl">
<h1>-- Data Presentation Format --</h1>
<ul>
<li ng-repeat="item in itemlist">
<div ng-switch on="item[1]">
<div ng-switch-when="Parent">{{item[0]}}</div>
<div ng-switch-default> {{item[0]}}</div>
</div>
</li>
</ul>
<br/>
<h1>-- Dropdown Box --</h1>
<select ng-model="loc1" ng-options="item[0] for item in itemlist">
<option value="">Item</option>
</select>
<br/><br/>
<h1>-- What I Got --</h1>
<select ng-model="loc2">
<option ng-repeat="item in itemlist">
<div ng-switch on="item[1]">
<div ng-switch-when="Parent">{{item[0]}}</div>
<div ng-switch-default> {{item[0]}}</div>
</div>
</option>
</select>
ジャバスクリプト:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.itemlist =
[
["Unit A", "Parent"],
["Room A", "Child"],
["Room B", "Child"],
["Room C", "Child"],
["Room D", "Child"],
["Room E", "Child"],
["Unit 1", "Parent"],
["Room 1", "Child"],
["Room 2", "Child"],
["Room 3", "Child"]
];
}
JsFiddle はこちら: http://jsfiddle.net/HB7LU/11174/