ng-repeatで三重ループ(総当たり戦)を作成した際に親の親のインデックスが欲しい

Question

angularJSの1系で総当たり戦をテーブルで表示するプログラムを組んでいます。
tableを縦方向、横方向それぞれにループさせて組んだ時点で二重ループになっています。
二重ループの場合、親のインデックスは$parent.$indexで取得できますが、
組んでいる総当たり戦のプログラムではセルの中でデータに合致するものを探す際にさらにループを走らせており、三重ループになっています。
元はJSPだったので三重ループでも問題なかったのですが、
AngularJSに移植するとインデックスが取れない問題が発覚しました。

<table border=1 class="table">
	<thead>
	<tr>
		<th></th>
		<th>チーム名</th>
		<th>試合</th>
		<th>勝利</th>
		<th>敗北</th>
		<th>引き分け</th>
		<th>勝率</th>
		<th>勝ち点</th>
		<th>打率</th>
		<th>防御率</th>
		<th ng-repeat="i in range(items.length)">対{{$parent.items.resultList[i].shortName}}</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="resultList in items.resultList">
		<th>{{$index+1}}</th>
		<td>{{resultList.teamName}}</td>
		<td>{{resultList.gameCount}}</td>
		<td>{{resultList.win}}</td>
		<td>{{resultList.lose}}</td>
		<td>{{resultList.draw}}</td>
		<td>{{resultList.percentage | number:3}}</td>
		<td>{{resultList.points}}</td>
		<td>{{resultList.avg | number:3}}</a></td>
		<td>{{resultList.era | number:2}}</a></td>
		<div ng-repeat="i in range($parent.items.length)">
			<td ng-repeat="opponentList in $parent.items.opponentList">
					<!--  <div ng-if="$parent.items.resultList.teamId==opponentList.teamId && $parent.items.resultList2[i].teamId==opponentList.opponent">-->
					<div>
						{{opponentList.win}}-{{opponentList.lose}}({{opponentList.draw}})</div>
			</td>
		</div>
	</tr>
	</tbody>
</table>

APIから受け渡すデータの形式です。

resultList[0]:{
avg:0.4195
draw:0
era:4.5454545
gameCount:11
leagueId:35
lose:2
opponent:null
percentage:0.8182
points:38
rank:null
shortName:"A"
teamId:3
teamName:"A"
win:9
}

opponentList[0]:{
draw:0
leagueId:35
lose:4
opponent:3
teamId:1
win:1
}

コメントアウトしている部分で本来データの表示非表示を判定していました。
range()は()内に指定した回数ループする関数です。
opponentListはチームID1のチームはチームID3のチームに対して1勝4敗0分というデータを表します。
リストの要素が1対1でセルに対応しています。
resultList2はresultListのコピーなので中身は同じです。

現在考えているアプローチとしては、

• 親の親のインデックスが取れないか
• 上記が無理ならコントローラ側のjsでデータを加工するか

データを加工するにしても、
二重ループの中でループさせずにデータを紐付けたい、
あるいは
ループさせても親の親のインデックスを使わない構成にしたい

という状況で若干手詰まりです。
三重ループを経験されている方にお知恵を拝借したく存じます。

Answer 1

rangeメソッドの内容など詳細が把握しきれないのですが、現状、itemsの属性としてresultListとopponentListが存在しているのですよね？

items
├resultList
└opponentList

opponentListが勝敗の結果だとしたら、それをresultListの属性とすることはできないのですか？
（jsonの属性に配列が設定できることは把握されていますか？）

APIから返却する時点でそのように加工してもよいですし、それが無理であればJavaScript内でも加工できると思います。

items
└resultList
_└opponentList

resultList[0]:{
avg:0.4195
draw:0
era:4.5454545
gameCount:11
leagueId:35
lose:2
opponent:null
percentage:0.8182
points:38
rank:null
shortName:"A"
teamId:3
teamName:"A"
win:9
opponentList:[]//←ここに配列の属性を追加、従来のoppenentListとする
}

そうすると例えば次のように記述できませんか。（range関数も工夫すれば不要のように感じます）

    <tr ng-repeat="resultList in items.resultList">
        <th>{{$index+1}}</th>
        <td>{{resultList.teamName}}</td>
        <td>{{resultList.gameCount}}</td>
        <td>{{resultList.win}}</td>
        <td>{{resultList.lose}}</td>
        <td>{{resultList.draw}}</td>
        <td>{{resultList.percentage | number:3}}</td>
        <td>{{resultList.points}}</td>
        <td>{{resultList.avg | number:3}}</a></td>
        <td>{{resultList.era | number:2}}</a></td>
        <div ng-repeat="i in range($parent.items.length)">
            <td ng-repeat="opponentList in resultList .opponentList">
                        {{opponentList.win}}-{{opponentList.lose}}({{opponentList.draw}})</div>
            </td>
        </div>
    </tr>

もし的を外していたらすみません。

Comments

[退会済みユーザー]

非常に参考になりました。ありがとうございます。
jsonで配列を指定できるのは盲点でした。
データ的に総当たりといっても対戦漏れがあるデータなので想定よりループ数が少なくなってしまって空データを作るのに苦労しています。

[akabee]

参考になったようで良かったです。
jsonはデータ構造がかなり柔軟に設定できますので、ある程度データ構造を考慮すれば乗り越えられることは多いです。

対戦漏れですか、厄介ですね。
私なら、想定されるべき最大数の対戦のデータは予め作成しておき、対戦していないデータには値を入れず、値の入っていないデータは対戦漏れと扱うような制御を考えます。（総当たりした場合に存在すべきデータがチームによって無い場合があったり、対戦数がチームによってバラバラな場合などは制御が厄介になりそうですので）

Answer 2

自分がangular1で開発していた頃は以下の方法でindexを予め指定できていた記憶です。

<div ng-repeat="( index_1, data_1 ) in list_1">
  <div ng-repeat="( index_2, data_2 ) in list_2">
    {{index_1}} : {{index_2}} : {{data_2.some_key}}
  </div>
</div>

上記の方法で問題なければ、この方法で親の親でも問題なくindexが指定できるかと思います。