AngularJSのng-repeatを使ってリストやテーブルを作成する方法、ng-repeatで表示した内容をAngularJSのフィルターを使ってフィルタリングして表示する方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
ng-repeatを使って表を作成
以下に作成例を示します。
①スクリプトにテーブルで表示するデータを定義
①スクリプトにテーブルで表示するデータを定義
$scope.people = [
{ name: "相田", age: 20},
{ name: "伊藤", age: 55},
{ name: "上野", age: 20},
{ name: "江藤", age: 37},
{ name: "岡田", age: 20},
{ name: "加藤", age: 32}
];
②スクリプトで定義したデータモデル（$scope.people）に対しng-repeatディレクティブを適用し、テーブルを生成
<table class="table">
<thead>
<tr><th>名前</th><th>年齢</th></tr>
</thead>
<tbody>
<tr ng-repeat="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
</table>
ng-repeatのビルトイン変数を使用する例
ng-repeatは、指定したコレクション（上記例では$scope.people）をループ処理する際、下記ビルトイン変数にも自動で値が割当てられる。
$index：ループで現在処理されているオブジェクトのオフセット番号。(0～コレクション長-1）
$first：ループ処理で先頭のオブジェクトの場合はtrue。
$last：ループ処理で先頭、最後以外のオブジェクトの場合はtrue。
$even：ループ処理で$indexが偶数のオブジェクトの場合はtrue。
$odd：ループ処理で$indexが奇数のオブジェクトの場合はtrue。
上記ビルトイン変数を使って、表に行番号を追加し、背景色をストライプにするサンプルの作成例を示します。
$index：ループで現在処理されているオブジェクトのオフセット番号。(0～コレクション長-1）
$first：ループ処理で先頭のオブジェクトの場合はtrue。
$last：ループ処理で先頭、最後以外のオブジェクトの場合はtrue。
$even：ループ処理で$indexが偶数のオブジェクトの場合はtrue。
$odd：ループ処理で$indexが奇数のオブジェクトの場合はtrue。
上記ビルトイン変数を使って、表に行番号を追加し、背景色をストライプにするサンプルの作成例を示します。
<tbody>
<tr ng-repeat="person in people" ng-class="$odd ? 'bg-success' : 'bg-warning'">
<td>{{$index + 1}}</td>
<td>{{person.name}}</td>
<td>{{person.age}}</td>
</tr>
</tbody>
※’bg-success’、’bg-warning’
Bootstrap3で定義されているCSSクラス。
※ng-class=”$odd ? ‘bg-success’ : ‘bg-warning’
AngularJSのng-classディレクティブを使って、ng-repeatのビルトイン変数$oddがtrueの場合は’bg-success’のCSSクラス、falseの場合は’bg-warning’のCSSクラスを適用し、テーブルの各行毎に背景色を変えています。
ng-repeatを入力文字列でフィルター
AngularJSのビルトインのフィルター機能を使用してng-repeatの表示内容をフィルタリングする例です。
フィルター：<input ng-model="query" type="text" placeholder="表示したい名前、住所、年齢を入力" autofocus>
<ul>
<li ng-repeat="person in people | filter: query | orderBy: 'name' ">{{person.name}} ({{person.age}}) {{person.address}}</li>
</ul>
「 | filter: query」でng-repeatのループ処理でユーザーがテキストボックスで入力した文字列を含むオブジェクトのみを抽出しています。
さらに「| orderBy: ‘age’」で’age’属性の昇順に並び替えて表示しています。