AngularJSで、入力フォームを簡単にチェックできるディレクティブを使う

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

スタイルを扱うためのディレクティブ

　続いて、HTMLのclassやstyle属性を扱うためのディレクティブを紹介します。

表示と非表示をするディレクティブ ngShow/ngHide

　ngShow/ngHideは、条件に一致した要素に対してdisplay:noneのスタイルを利用して表示・非表示をおこなうディレクティブです。「!」を使って真にはならない条件も作成できますので、ngHideを使わなくてもngShowだけで同じ効果を作成することができます。

　ngIfでも同様のことはできますが、ngIfは指定したDOM要素自身の追加・削除を行います。この違いはCSSで要素の順番などを使っている場合には影響を受けます。詳しくは前回のngIfディレクティブを参照してください。

　下の例は、チェックボックスにチェックをすると表示されたり、非表示になるサンプルで実行結果は図3のようになります。

リスト4　ngShow/ngHideの利用例（ngshow.htmlの抜粋）

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

図3　ngShowの実行結果

CSSを記述するためのディレクティブ ngStyle

　ngStyleは、スタイルを指定するためのディレクティブです。キーと値のオブジェクトでスタイルを指定します。また、すでに指定があるスタイルはそのまま残ります。ただし、同じスタイル指定の場合には、ngStyleで指定したもので上書きされます。

リスト5　ngStyleの利用例（ngstyle.htmlの抜粋）

<div ng-init="style = { 'color': 'red', 'font-size' : '2em' }" ></div>
<div ng-style="style" style="color: blue; text-decoration: underline">
    こんにちは
</div>

図4　ngStyleの実行結果

スタイルのクラスを指定をするためのディレクティブ ngClass

　ngClassはクラス名を指定するためのディレクティブです。ngClassの指定方法には3つの方法があります。1つ目はそのままのクラス名を指定する方法で、2つ目は配列形式で複数のクラス名を指定する方法で、リスト6のように使用します。

リスト6　ngClassの利用例（ngclass.htmlの抜粋）

<style>
    .warn { color: red; }
    .name { text-decoration: underline; }
</style>
<div ng-init="type = 'warn'; label ='name'"></div>
<div ng-class="type" class="title">１つのクラスを指定します</div>
<div ng-class="[type, label]">配列でクラスを複数指定します</div>

図5　ngClassの実行結果

　3つめは、条件に一致した場合に指定するクラス名を定義する方法で、条件に応じたデザインの切り替えなどを行いたい場合に利用できます。条件の指定と適用するクラス名はリスト7（ngClassのオブジェクト形式での指定方法）のようにオブジェクト形式で指定します。

リスト7　ngClassでのオブジェクト形式での指定方法

{
   <適用されるクラス名> : <適用条件>
   <適用されるクラス名> : <適用条件>
   :
}

　下の例はチェックした時とチェックを外した時のデザインを切り替えるサンプルコードです。

リスト8　ngClassでのオブジェクト形式での使用例（ngclass.htmlの抜粋）

<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の実行結果（オブジェクト指定）

ループの中で交互にクラスを切り替えるディレクティブ ngClassOdd/ngClassEven

　ngClassOddとngClassEvenは、ngRepeatとともに利用されるディレクティブで、繰り返し時の奇数回目と偶数回目で異なったクラスを指定する場合に使用します。

リスト9　ngClassOdd/ngClassEvenの使用例（ngclass_odd_even.htmlの抜粋）

<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の実行例

最後に

　前回と今回でAngularJSでよく利用するビルトイン・ディレクティブを中心に紹介しましたが、まだまだ紹介しきれないディレクティブも多々あります。一つ一つは難しくないため、リファレンスや本を利用し実際に試して見ることが最も早い理解方法と思います。

　しかしながら、一通り慣れてきても多少効果がわかりにくいものや、使い方がわかりにくいディレクティブがあることも事実です。

　次回はこのようなディレクティブを紹介したいと思います。

参考資料

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