angular.js ng-repeatの組み込み変数 | Webエンジニアブログ

ng-repeatのビルトイン変数を利用してtableの背景色を一行おきに設定

AngularJSのng-repeatディレクティブで利用できる変数

ng-repeatの組み込み(ビルトイン)変数は利用頻度が高いプロパティ。

AngularJSの公式サイトでは以下のURL(英語)で使い方を確認できる。

https://docs.angularjs.org/api/ng/directive/ngRepeat

本記事では、

$index
$middle
$even
$odd

を利用してtableタブ内における繰り返し処理で、ng-repeatの組み込み変数を使ったサンプルを紹介する。

サンプルコード

headタグ内では、foundation(cssフレームワーク)とangularjs本体を読み込み、サンプルとなるModelデータを定義している。

<html ng-app="webEngineerSampleApp">
<head>
    <title>title</title>
    <link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script>
        angular.module("webEngineerSampleApp", [])
            .controller("repeatCtrl", function ($scope) {
                $scope.thread = [
                    { answer: "test engineer", response: false },
                    { answer: "test blog", response: false },
                    { answer: "blog test", response: false },
                    { answer: "web engineer test", response: true },
                    { answer: "web title", response: false }];
            });
    </script>
</head>

上のデータをng-repeatを利用してtableで表現する。

<div class="panel" ng-controller="repeatCtrl">
    <h3>Thread Title</h3>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>Answer</th>
                <th>Response</th>
            </tr>
        </thead>
        <tr ng-repeat="e in thread">
            <td>{{$index + 1}}</td>
            <td ng-repeat="field in e">{{field}}</td>
        </tr>
    </table>
</div>

ng-repeatを入れ子にして行と列の双方で繰り返し処理をしている。ビルトイン変数の$indexを利用して添え字を表示している。上のコードの実行結果は下の画像のようになった。

$evenを利用して行に色を付ける

$evenを利用してtable内の行に一行おきに色を付けてみたい。

<tr ng-repeat="e in thread" ng-class="$even ? 'even' : ''">

ng-classディレクティブの値として条件式を定義することで、trueの場合にevenというclass属性を設定することが可能。ng-classの条件式については、以下の記事にまとめられているので参考にして頂きたい。

http://dim5.net/angularjs/ng-class-conditional.html

foundation5の話題になるが、evenのclass属性を有効にするために以下のcssが必要になる模様。

<style>
table tr:nth-of-type(even) {
    background-color: transparent !important;
}
</style>

stackoverflowのquestionを参考に上のcssを追加したところ、行に色を付けることができた。

$middleを利用して先頭と最後の行を区別する

ng-repeatの組み込み変数$middleを利用すれば、先頭と最後の行を区別することが可能。ng-ifディレクティブと$middleを利用して先頭と最後の行を非表示にしてみる。

<tr ng-repeat="e in thread" ng-if="$middle">

1行目と5行目が表示しないようにすることができた。

先頭と最後の行を個別に区別したい場合には、

$first
$last

双方の変数を利用することができる。