AngularJSアプリケーション開発ガイド

24

2

章 

AngularJS

アプリケーションの構造

2.3.4

 リスト、テーブル、その他の繰り返し要素

AngularJS

のディレクティブの中でも、きわめて強力なものの

1

つが

ng-repeat

です。これを

使うと、コレクション内の要素の個数分だけ要素が繰り返し生成されます。何かのリストを作成し

ようと思ったら、迷わず

ng-repeat

を使いましょう。

例として、教職員向けに学生名簿アプリケーションを作成します。生徒のデータはサーバから取

得されるのが一般的ですが、ここでは以下のように

JavaScript

のモデルとして定義します。

var students = [{name:"

メアリー・コントラリー

", id:"1"},

{name:"

ジャック・スプラット

", id:"2"},

{name:"

ジル・ヒル

", id:"3"}];

function StudentListController($scope) {

$scope.students = students;

}

ここから生徒のリストを生成するには次のようにします。

<ul ng-controller="StudentListController">

<li ng-repeat="student in students">

<a href="/student/view/{{student.id}}">{{student.name}}</a>

</li>

</ul>

すると、

ng-repeat

が指定されているタグとそのコンテンツすべてが必要なだけコピ