View(html)で掲示板データの表示とディレクティブを使った繰り返し処理
HTML側でControllerで生成した$scopeのデータを利用
Model編で掲示板データを定義し、
Controllerの使い方ではそのデータを取得して$scopeに追加してView側で利用可能な状態にしたり、新しい掲示板データをModelに追加する機能を実装した。
$scopeにデータが入っている状態なので、View側でそのデータを利用してみる。AngularJSの使い方入門編に載せた純粋なHTMLを部分的にAngularJSのコードで置き換える作業をやってみたい。
h1タグにスレッドタイトルを表示する。
<h1>{{thread.title}}</h1>
上のように書くことでスレッドタイトルを表示することができる。回答の件数を表示するために$scopeのデータを利用することもできる。
<span class="radius label">{{thread.answers.length}}</span>
Model編で定義したデータ構造には、4件のデータがあるので4と表示することができる。
ng-repeatディレクティブで回答データを繰り返し表示
$scopeのデータを個別に取得したり、件数を計算して表示する例を上で載せてみた。複数の回答データを繰り返しリスト形式にして表示する場合には、ng-repeatディレクティブを利用することで表示することが可能。
<ul class="inline-list" ng-repeat="e in thread.answers">
<li>{{e.body}}</li>
</ul>
Controller編では、addAnswer()メソッドを追加し、フォームから回答を送信することでデータ構造に新しいデータを追加できることを確認した。ng-repeatで回答の一覧を表示できるようになり、同時にフォームから新しい回答を入力するとリストに回答がダイレクトに反映されることを確認できる。
回答を入力するというユーザーアクションを起点として、AngularJSのModelデータがリアルタイムに操作され、それと同時にViewの表示が連動している。
ここまでの作業で掲示板アプリは画像のようになった。
赤枠で囲った部分が本エントリーで解説した部分になる。
View編は以上です。Two-Way Data Bindingの使い方へ
AngularJS使い方ガイド記事一覧