スタイルを扱うためのディレクティブ
続いて、HTMLのclassやstyle属性を扱うためのディレクティブを紹介します。
表示と非表示をするディレクティブ ngShow/ngHide
ngShow/ngHideは、条件に一致した要素に対してdisplay:noneのスタイルを利用して表示・非表示をおこなうディレクティブです。「!」を使って真にはならない条件も作成できますので、ngHideを使わなくてもngShowだけで同じ効果を作成することができます。
ngIfでも同様のことはできますが、ngIfは指定したDOM要素自身の追加・削除を行います。この違いはCSSで要素の順番などを使っている場合には影響を受けます。詳しくは前回のngIfディレクティブを参照してください。
下の例は、チェックボックスにチェックをすると表示されたり、非表示になるサンプルで実行結果は図3のようになります。
<div ng-init="show = true;"> <input type="checkbox" ng-model="show"> <div ng-show="show">ngShow:チェック時に表示されます</div> <div ng-show="!show">!ngShow:チェックされていない時に表示されます</div> <div ng-hide="show">ngHide:チェックされていない時に表示されます</div> <div ng-hide="!show">!ngHide:チェック時に表示されます</div> </div>
CSSを記述するためのディレクティブ ngStyle
ngStyleは、スタイルを指定するためのディレクティブです。キーと値のオブジェクトでスタイルを指定します。また、すでに指定があるスタイルはそのまま残ります。ただし、同じスタイル指定の場合には、ngStyleで指定したもので上書きされます。
<div ng-init="style = { 'color': 'red', 'font-size' : '2em' }" ></div> <div ng-style="style" style="color: blue; text-decoration: underline"> こんにちは </div>
![図4 ngStyleの実行結果](http://cz-cdn.shoeisha.jp/static/images/article/8569/8569_004.gif)
スタイルのクラスを指定をするためのディレクティブ ngClass
ngClassはクラス名を指定するためのディレクティブです。ngClassの指定方法には3つの方法があります。1つ目はそのままのクラス名を指定する方法で、2つ目は配列形式で複数のクラス名を指定する方法で、リスト6のように使用します。
<style> .warn { color: red; } .name { text-decoration: underline; } </style> <div ng-init="type = 'warn'; label ='name'"></div> <div ng-class="type" class="title">1つのクラスを指定します</div> <div ng-class="[type, label]">配列でクラスを複数指定します</div>
![図5 ngClassの実行結果](http://cz-cdn.shoeisha.jp/static/images/article/8569/8569_005.gif)
3つめは、条件に一致した場合に指定するクラス名を定義する方法で、条件に応じたデザインの切り替えなどを行いたい場合に利用できます。条件の指定と適用するクラス名はリスト7(ngClassのオブジェクト形式での指定方法)のようにオブジェクト形式で指定します。
{ <適用されるクラス名> : <適用条件> <適用されるクラス名> : <適用条件> : }
下の例はチェックした時とチェックを外した時のデザインを切り替えるサンプルコードです。
<style> .deleteClass { text-decoration: line-through; } .titleClass { font-weight: bold; } </style> <div ng-init="delete = false;"></div> <input type="checkbox" ng-model="delete"> <div ng-class="{ deleteClass : delete, titleClass : !delete }">条件により適用されるクラス</div>
![図6 ngClassの実行結果(オブジェクト指定)](http://cz-cdn.shoeisha.jp/static/images/article/8569/8569_006.gif)
ループの中で交互にクラスを切り替えるディレクティブ ngClassOdd/ngClassEven
ngClassOddとngClassEvenは、ngRepeatとともに利用されるディレクティブで、繰り返し時の奇数回目と偶数回目で異なったクラスを指定する場合に使用します。
<style> <style> .row1 td{ background-color: #cccccc } .row2 td{ background-color: #285e8e; color : white } </style> <div ng-init="list = ['日本','アメリカ','カナダ','中国','韓国']"></div> <table> <tr ng-repeat="item in list" ng-class-even="'row1'" ng-class-odd="'row2'"> <td>{{item}}</td> </tr> </table>
![図7 ngClassOdd/ngClassEvenの実行例](http://cz-cdn.shoeisha.jp/static/images/article/8569/8569_007.gif)
最後に
前回と今回でAngularJSでよく利用するビルトイン・ディレクティブを中心に紹介しましたが、まだまだ紹介しきれないディレクティブも多々あります。一つ一つは難しくないため、リファレンスや本を利用し実際に試して見ることが最も早い理解方法と思います。
しかしながら、一通り慣れてきても多少効果がわかりにくいものや、使い方がわかりにくいディレクティブがあることも事実です。
次回はこのようなディレクティブを紹介したいと思います。