AngularJS 1系初心者です。
既存のJSPソースをAngularで置き換え中です。
技術書は軽く流し読みしかしていないので常識だったら申し訳ないです。
ng-repeatで回数を指定する
listSize=$scope.items.listSize;
$rootScope.range = function(listSize) {
var arr = [];
for (var i=0; i<listSize; ++i) arr.push(i);
return arr;
};
listSizeに回数を指定します。
参考リンク:AngularJS tips - ng-repeat で配列ではなく数値で for ループする方法
ng-repeatの罠
ng-repeatを使う場合、ループ内ではinで指定した変数しか参照できません。
<tr ng-repeat="i in range(items.listSize-1)">
<td>{{i+1}}</td>
<td ng-if="$parent.items.obpTop10[i].rank == 1" bgcolor="#FC9898">{{$parent.items.obpTop10[i].name}}/{{$parent.items.obpTop10[i].obp | number:4}}</td>
<td ng-if="$parent.items.obpTop10[i].rank != 1">{{$parent.items.obpTop10[i].name}}/{{$parent.items.obpTop10[i].obp | number:4}}</td>
<td ng-if="$parent.items.twobaseTop10[i].rank == 1" bgcolor="#FC9898">{{$parent.items.twobaseTop10[i].name}}/{{$parent.items.twobaseTop10[i].twobase}}本</td>
<td ng-if="$parent.items.twobaseTop10[i].rank != 1">{{$parent.items.twobaseTop10[i].name}}/{{$parent.items.twobaseTop10[i].twobase}}本</td>
<td ng-if="$parent.items.slgTop10[i].rank == 1" bgcolor="#FC9898">{{$parent.items.slgTop10[i].name}}/{{$parent.items.slgTop10[i].slg | number:4}}</td>
<td ng-if="$parent.items.slgTop10[i].rank != 1">{{$parent.items.slgTop10[i].name}}/{{$parent.items.slgTop10[i].slg | number:4}}</td>
<td ng-if="$parent.items.fourBallTop10[i].rank == 1" bgcolor="#FC9898">{{$parent.items.fourBallTop10[i].name}}/{{$parent.items.fourBallTop10[i].fourBall}}個</td>
$scopeなどの中身を参照する場合は$parentで親のスコープを参照する必要があります。
AngularJS でループ外のスコープにアクセスする
”AngularJS ループ外”→"ng-repeat スコープ"などでググってたどり着きました。
iはインデックス(添え字)です。
前述した回数指定を行ってループさせながらインデックスで配列にアクセスする方法です。