ng-repeat属性の特殊変数。

Level 1｜｜2016/07/12

前回、「ng-repeat属性」で構文を学びましたが、この配下のみで利用できる特殊変数があるので、これも勉強しときます。

ng-repeat属性の説明を見る

サンプルコード

angularJSのng-repeat属性配下で使える特殊変数のサンプルを見てみましょう。
サンプルは、JS側で設定した項目を値として吐き出し、ng-repeat属性の特殊変数「$index」「$even」「$odd」「$first」「$last」「$middle」の真偽を吐き出しています。

HTMLファイル

<table>
    <tr>
        <th>値</th>
        <th>$index</th>
        <th>$even</th>
        <th>$odd</th>
        <th>$first</th>
        <th>$last</th>
        <th>$middle</th>
    </tr>
    <tr ng-repeat="seo in seofactors">
         <td>{{seo.title}}</td>
         <td>{{$index}}</td>
         <td>{{$even ? '偶数':'×'}}</td>
         <td>{{$odd ? '奇数':'×'}}</td>
         <td>{{$first ? '最初':'×'}}</td>
         <td>{{$last ? '最後':'×'}}</td>
         <td>{{$middle ? '真ん中':'×'}}</td>
    </tr>
</table>
            

1) 番号をふる「$index」

         <td>{{$index}}</td>
            

取り出した値に対して0から順に番号を付加するのが、「$index」です。

2）偶数にだけ適用「$even」

         <td>{{$even ? '偶数':'×'}}</td>
            

取り出した値に対して偶数であるかどうかを判断するのが、「$even」です。

{{$even ? '真の値':'偽の値'}}

記述は上記の通りです。これは「$even」以外の特殊変数も同じ書き方をします。「$even」の場合、真の値=偶数という意味になります。

3）奇数にだけ適用「$odd」

         <td>{{$odd ? '奇数':'×'}}</td>
            

取り出した値に対して奇数であるかどうかを判断するのが、「$odd」です。

4）最初の値に適用「$first」

         <td>{{$first ? '最初':'×'}}</td>
            

取り出した値に対して最初の値かどうかを判断するのが、「$first」です。

5）最後の値に適用「$last」

         <td>{{$last ? '最後':'×'}}</td>
            

取り出した値に対して最後の値かどうかを判断するのが、「$last」です。

6）中間の値に適用「$middle」

         <td>{{$middle ? '真ん中':'×'}}</td>
            

取り出した値に対して中間の値かどうかを判断するのが、「$middle」です。
中間の値=最初と最後以外となります。