制御を扱うためのディレクティブ
条件分岐や、繰り返しを行うためのディレクティブです。
条件に一致した要素の削除ができるディレクティブ - ngIf
ngIfは指定した条件が一致する場合に指定した要素を表示し、一致しない場合に要素を削除するディレクティブです。似たディレクティブに、ngShow/ngHideがあります。こちらはスタイルを使用していますが、ngIfではDOM要素自体を削除したり、元にもどしたりする処理をします。従って、順番を利用したCSSを記述している場合には、その要素の順番自体が変わってくるなど、要素の有無によって受ける影響に気をつける必要があります。
以下の例ではチェックボックスにチェックをするとHelloという文字を表示する例です。
<div ng-init="show = false;">
<input type="checkbox" ng-model="show" >表示
<div ng-if="show">Hello</div>
</div>
ループ処理を行うディレクティブ - ngRepeat
ngRepeatは繰り返して要素を表示するためのディレクティブです。また、繰り返しをするときに便利な情報として、表2の変数が自動で利用できます。
| 変数名 | 説明 |
|---|---|
| $index | 繰り返しのインデックス値。0から連番となる |
| $first | 最初の繰り返し時にtrueとなる |
| $last | 最後の繰り返し時にtrueとなる |
| $middle | $firstと$lastの間の繰り返し時にtrueとなる |
| $even | 偶数時の繰り返し時にtrueとなる |
| $odd | 奇数時の繰り返し時にtrueとなる |
以下は、配列の内容を順に表示する例です。
<div ng-init="list = ['りんご','ばなな','いちご','すいか']"></div>
<table>
: (省略)
<tr ng-repeat="item in list">
<td>{{item}}</td>
<td>{{$index}}</td>
<td>{{$first}}</td>
<td>{{$middle}}</td>
<td>{{$last}}</td>
<td>{{$even}}</td>
<td>{{$odd}}</td>
</tr>
</table>
この繰り返しを実行すると図4のようになります。
また、１つのタグの繰り返しではなく、複数のタグにまたがってループを行いたい場合にはng-repeat-start/ng-repeat-endという属性が利用できます。リスト13では、dt要素とdd要素を順番に繰り返す必要が有るdl要素を使う場合の例です。
<div ng-init="list = ['りんご','ばなな','いちご','すいか']"></div>
<dl>
<dt ng-repeat-start="item in list">要素({{$index + 1}})</dt>
<dd ng-repeat-end>{{item}}</dd>
</dl>
表示を切り替えるディレクティブ - ngSwitch
ngSwitchは、指定した値に応じて要素の表示／非表示を行うためのディレクティブです。
下の例では、セレクトボックスによって指定された国コードに応じて表示する国名を変える例です。実際の表示では、ng-switch-whenを使って一致する場合の表示を指定し、ng-switch-defaultでは、指定したすべてのng-switch-whenのいずれにも一致しない場合、もしくは下の例の場合にはセレクトボックスで何も選択されていない場合の表示が指定できます。
<div ng-init="list = ['jp','au','ca','xx']"></div>
<select ng-model="domain">
<option ng-repeat="item in list">{{item}}</option>
</select>
<div ng-switch="domain">
<span ng-switch-when="jp">日本</span>
<span ng-switch-when="au">オーストラリア</span>
<span ng-switch-when="ca">カナダ</span>
<span ng-switch-default>その他</span>
</div>
最後に
今回はAngularJSのテンプレートを記述する際に基本となるディレクティブを中心に紹介しました。ビルトイン・ディレクティブだけでもかなり込み入ったHTMLの制御ができます。また、今回はサンプルのためにngInitを利用しデータを定義してしまいましたが、実際にはコントローラを利用し簡潔なコードを保つ必要があります。
次回はフォームを使った双方向バインディングが利用出来るディレクティブを中心に紹介します。
