LoginSignup
1

More than 5 years have passed since last update.

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

Posted at

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はインデックス(添え字)です。
前述した回数指定を行ってループさせながらインデックスで配列にアクセスする方法です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1