繰り返しのデータを表示する
続いて、一覧ページを作成していきます。一覧は、配列に保存したデータを繰り返し表示していきます。そのためにリスト5のように新たに作成するコントローラ（listController）内で、データの配列を作成します。
(function(module){
// : (省略)
// 一覧を表示する為のコントローラの作成
module.controller('listController',function($scope){
$scope.items = [
{
title: 'お買い物リスト',
memo : '大根と豆腐を買ってくる'
},
{
title: '通帳記入をする',
memo : 'XX銀行の貯金通帳に記入する'
}
];
});
}(TodoModule));
"$scope.items"という配列に表示するデータ一覧がありますので、そのデータを繰り返し表示する為のHTMLをリスト6のように編集します。
<div class="container" ng-show="show.list">
<div ng-controller="listController">
<div class="list-group">
<a class="list-group-item" ng-repeat="item in items"> <!-- （1） 繰り返しを指定する -->
<div>
<h4 class="list-group-item-heading">{{item.title}}</h4> <!-- （2） 各データの内容を表示する -->
<p class="list-group-item-text" >{{item.memo}}</p>
</div>
</a>
</div>
</div>
</div>
また、ここで使用するディレクティブは表3となります。
| ディレクティブ名 | 指定する属性 | 説明 |
|---|---|---|
| ngRepeat | ng-repeat | 配列形式のデータを１つづつ繰り返し表示をする為のディレクティブ。HTMLはデータとして繰り返す分だけ、その要素が作成される。 |
"ngRepeat"を利用する際には、（1）のように指定します。ここでitemsは配列のデータを示し、itemは繰り返される時の各データの変数になります。これをJavaScriptのコードで記述するとリスト7のようになります。
items.forEach(function(item){
});
また、各変数のデータを表示する際には、{{変数名}}とHTML内に記述するとその変数の値を設定することができます。従って、{{item.title}}という指定で各配列内オブジェクトのtitleプロパティを設定されます。
ページ内のクリックに対応する
続いて、ページの切り替えをする処理をリスト8のようにpageControllerコントローラにchangePage()関数を定義します。定義する場所は、（1）のように"$scope"変数に指定します。これで、HTMLページでこの関数を実行できるように指定が可能です。これは先ほど、"$scope"内に作成した変数にアクセスできたように、関数にも同様にアクセスできます。
module.controller('pageController',function($scope){
// : (省略)
$scope.changePage = function(type){
for(var name in $scope.show){
if(name == type){
$scope.show[name] = true;
}
else{
$scope.show[name] = false;
}
}
};
}
ページの切り替えは、サンプルアプリケーションの概要で示したようにページフッタで行えます。その部分のHTMLをリスト9に示します。
<!-- フッタ部分 -->
<nav>
<div>
<a class="btn btn-default" ng-click="changePage('add')">新規</a> <!-- （1） 新規ページの表示 -->
<a class="btn btn-default" ng-click="changePage('list')">一覧</a> <!-- （2） 一覧ページの表示 -->
</div>
</nav>
ngClickディレクティブ（ng-click属性）は、aタグやbuttonタグなどクリックイベントが発生した際に、実行すべき処理を値に設定します。
（1）と（2）の双方で、クリックした際には先ほど作成した関数の"changePage"関数を実行するように指定します。
changePage関数は、引数にページタイプを指定するように先ほどしたので、ここでは引数にそれぞれのページタイプを指定しています。記述する方法として、今までのonClick属性と同様に記述できるので親しみやすいと思います。
しかしながら、AngularJSではスコープを用いることで、JavaScriptでのグローバル汚染などの問題を回避しつつ、より直感的にHTMLが記述できるようになっています。
次回に向けて
ここまでで、AngularJSを使ったアプリケーションの大まかな構造と、ページ表示を制御する為の方法、クリックなどのイベント処理を行う方法を紹介しました。これだけの機能を使っても、HTMLの制御と処理の分離が十分できます。
また、今回のようなサンプルアプリケーション程度の規模であれば、この構造のまま機能を追加していっても問題はありませんが、規模が大きくなっていくと各コントローラ同士でのデータ連係やイベント連携などの必要が生じてきます。
次回以降では、そのような連携部分を説明しつつサンプルアプリケーションを完成させていきます。
