AngularJSのディレクティブ機能でHTMLテンプレートを使いこなそう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第6回

制御を扱うためのディレクティブ

　条件分岐や、繰り返しを行うためのディレクティブです。

条件に一致した要素の削除ができるディレクティブ - ngIf

　ngIfは指定した条件が一致する場合に指定した要素を表示し、一致しない場合に要素を削除するディレクティブです。似たディレクティブに、ngShow/ngHideがあります。こちらはスタイルを使用していますが、ngIfではDOM要素自体を削除したり、元にもどしたりする処理をします。従って、順番を利用したCSSを記述している場合には、その要素の順番自体が変わってくるなど、要素の有無によって受ける影響に気をつける必要があります。

　以下の例ではチェックボックスにチェックをするとHelloという文字を表示する例です。

リスト11　ngIfの利用例（ngIf.htmlの抜粋）

<div ng-init="show = false;">
    <input type="checkbox" ng-model="show" >表示
    <div ng-if="show">Hello</div>
</div>

ループ処理を行うディレクティブ - ngRepeat

　ngRepeatは繰り返して要素を表示するためのディレクティブです。また、繰り返しをするときに便利な情報として、表2の変数が自動で利用できます。

表2　ngRepeat時に自動的に利用できる変数

変数名	説明
$index	繰り返しのインデックス値。0から連番となる
$first	最初の繰り返し時にtrueとなる
$last	最後の繰り返し時にtrueとなる
$middle	$firstと$lastの間の繰り返し時にtrueとなる
$even	偶数時の繰り返し時にtrueとなる
$odd	奇数時の繰り返し時にtrueとなる

　以下は、配列の内容を順に表示する例です。

リスト12　ngRepeatの利用例（ngrepeat.htmlの抜粋）

<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のようになります。

図4　ngRepeat実行結果

　また、１つのタグの繰り返しではなく、複数のタグにまたがってループを行いたい場合にはng-repeat-start/ng-repeat-endという属性が利用できます。リスト13では、dt要素とdd要素を順番に繰り返す必要が有るdl要素を使う場合の例です。

リスト13　ng-repeat-start/ng-repeat-endの利用例（ngrepeat_start_end.htmlの抜粋）

<div ng-init="list = ['りんご','ばなな','いちご','すいか']"></div>
<dl>
    <dt ng-repeat-start="item in list">要素({{$index + 1}})</dt>
    <dd ng-repeat-end>{{item}}</dd>
</dl>

図5　ngRepeatStart/ngRepeatEndの結果

表示を切り替えるディレクティブ - ngSwitch

　ngSwitchは、指定した値に応じて要素の表示／非表示を行うためのディレクティブです。

　下の例では、セレクトボックスによって指定された国コードに応じて表示する国名を変える例です。実際の表示では、ng-switch-whenを使って一致する場合の表示を指定し、ng-switch-defaultでは、指定したすべてのng-switch-whenのいずれにも一致しない場合、もしくは下の例の場合にはセレクトボックスで何も選択されていない場合の表示が指定できます。

リスト14　ngSwitchの利用例（ngswitch.htmlの抜粋）

<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>

図6　ngSwitchの実行結果

最後に

　今回はAngularJSのテンプレートを記述する際に基本となるディレクティブを中心に紹介しました。ビルトイン・ディレクティブだけでもかなり込み入ったHTMLの制御ができます。また、今回はサンプルのためにngInitを利用しデータを定義してしまいましたが、実際にはコントローラを利用し簡潔なコードを保つ必要があります。

　次回はフォームを使った双方向バインディングが利用出来るディレクティブを中心に紹介します。

参考資料

• AngularJS
• AngularJS（英語版APIリファレンス）
• AngularJS（日本語リファレンス）