Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

配列の内容を順に出力するには?(ng-repeat)

2015年11月9日

配列の内容を順に処理して出力できるng-repeatディレクティブの基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

 ng-repeatディレクティブを利用することで、配列の内容を順に出力できます。例えば以下は、記事一覧($scope.articles)を出力する例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body ng-controller="MyController">
<table class="table">
<tr>
  <th>タイトル</th><th>著者</th><th>公開日</th>
</tr>
<tr ng-repeat="article in articles">
  <td>{{$index + 1}}</td>
  <td><a ng-href="{{article.url}}">{{article.title}}</a></td>
  <td>{{article.author}}</td>
  <td>{{article.released | date: 'yyyy年MM月dd日'}}</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="i18n/angular-locale_ja-jp.js"></script>
<script>
angular.module('myApp', [])
  .controller('MyController', ['$scope', function($scope) {
    $scope.articles = [
      {
        url: 'https://www.buildinsider.net/web/jqueryref',
        title: 'jQuery逆引きリファレンス',
        author: 'WINGSプロジェクト',
        released: new Date(2015, 8, 1)
      },
      ……中略……
    ];
  }]);
</script>
</body>
</html>
記事情報を順番に読み込み、表組みに整形するコード(repeat.html)

サンプル全体はこちらからダウンロード・実行できる。

配列の内容をテーブルに整形

 ng-repeatディレクティブの構文は、以下の通りです。

[構文]ng-repeatディレクティブ

<element ng-repeat="data in array">
  contents
</element>
  • element: 任意の要素
  • data: 仮変数
  • array: 繰り返し対象の配列

 ng-repeatディレクティブでは、配列arrayの先頭から順に要素を取り出し、残りの要素がなくなるまで、<element>を繰り返し出力します。このとき、配列から取り出された要素は仮変数dataにセットされ、<element>の配下(contents)で参照できます。

 この例であれば、配列articlesの個々の要素が仮変数articleに格納されているはずなので、(例えば)記事のタイトルには「article.title」で、公開日には「article.released」でアクセスできます*1

繰り返し要素の配下で参照できる特殊変数

 ng-repeatディレクティブを指定した要素の配下では、以下のような特殊変数を利用することもできます。

変数概要
$index 要素のインデックス値(先頭は0
$first 最初の要素か
$middle 中間の要素か
$last 最後の要素か
$even インデックス値が偶数か
$odd インデックス値が奇数か
ng-repeatディレクティブで利用できる特殊変数

 例えば記事情報に連番を振りたいならば、以下のようなコードを書きます。$indexの値は0スタートなので、表示に際しては+1している点に注目です。

HTML
<tr ng-repeat="article in articles">
  <td>{{$index + 1}}</td>
  ……中略……
</tr>
特殊変数を利用したコード(repeat.html)
一覧表も連番が振られた結果

 その他、(例えば)$first$lastを利用することで、配列(表)の先頭/末尾でのみ適用すべきスタイルを指定できますし、$even$oddを利用することで、ループ内で交互に出力すべきコンテンツを定義することもできます。

 なお、交互に異なるスタイルを適用したいならば、より直接的な機能としてng-class-evenng-class-oddディレクティブも用意されています。詳しくは、別稿「TIPS:交互に異なるスタイルクラスを適用するには?」も参照してください。

処理対象:コレクション カテゴリ:基本
処理対象:繰り返し処理 カテゴリ:基本
処理対象:ディレクティブ(Directive) カテゴリ:基本
API:ng-repeat(ngRepeat) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第30回~第34回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
30. 要素のスタイルクラスを操作するには?(ng-class)

スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。

AngularJS TIPS
31. 交互に異なるスタイルクラスを適用するには?(ng-class-odd/ng-class-even)

ng-class-even/ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。

AngularJS TIPS
32. 【現在、表示中】≫ 配列の内容を順に出力するには?(ng-repeat)

配列の内容を順に処理して出力できるng-repeatディレクティブの基本的な使い方を説明する。

AngularJS TIPS
33. ng-repeat要素でさまざまな繰り返しを表現するには?(ng-repeat)

ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ(連想配列)」「複数の要素セット」の内容を順に処理して出力する方法を説明。

AngularJS TIPS
34. ログをコンソールに出力するには?($log)

AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示/非表示の切り替え方法も紹介する。

サイトからのお知らせ

Twitterでつぶやこう!