AngularJS初心者がハマりがちなこと

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はインデックス(添え字)です。

前述した回数指定を行ってループさせながらインデックスで配列にアクセスする方法です。