bool値や条件式の結果に応じてclass属性を追加するAngularJSのng-class

true/falseに応じてclassを設定

AngularJSのng-classでは、HTMLのclass属性を動的に設定することができる。

ng-classのベーシックな例が以下のコードになる。

<div ng-class="{second: true}" class="first">sample</div>

ng-classを利用してsecondというclass属性を追加するコードになるが、条件をtrueではなくfalseにするとclass属性は追加されなくなる。

上の例はbool値を直接記述しているが、変数や条件式をダイレクトに書くこともできる。

以下の例は各行のdoneの値に応じてredというclass属性を設定する例になる。

<tr ng-repeat="e in todo.tasks" ng-class="{red: e.done}">
	<td>チェックをオンオフすると行の色が変わります</td>
        <td><input type="checkbox" ng-model="e.done" /></td>                    
</tr>

そして、チェックボックスをオンオフして値を切り替えることで、ng-classの設定も連動して動作する

two way binding

によるデータ連携の中でng-classを利用したサンプルになる。チェックボックスをオンにすると、ng-modelの値が変化し、ng-classで同じ値を設定しているため、連動してredのclass属性が追加されたり、削除されたりする。

条件式

ng-classの条件式をインラインで書くことも可能で、条件式の結果に応じて一方のclass属性を追加することができる。

<span ng-class="(value==true) ? 'blue' : 'red'" class='default'</span>

numberが2の場合はblueを追加

<span ng-class="(number==2) ? 'blue' : 'red'" class='default'</span>

stringがfooではない場合はredを追加

<span ng-class="(string!='foo') ? 'blue' : 'red'" class='default'</span>

上のようなインライン方式の使い方ができるため、if文の条件式を書く感覚でng-classを動的に利用できる。

条件式の値はAngularJSの他のディレクティブで変更することができる。そのため、

<a ng-mouseover="value=true" ng-mouseleave="value=false">link</a>
<span ng-class="(value==true) ? 'blue' : 'red'" class='default'</span>

ユーザーのマウスアクションに応じてvalueの値を変更し、その値をng-classの条件式に利用することで、ダイナミックにclass属性を追加・削除することもできる。