bool値や条件式の結果に応じてclass属性を追加するAngularJSのng-class
true/falseに応じてclassを設定
AngularJSのng-classでは、HTMLのclass属性を動的に設定することができる。
ng-classのベーシックな例が以下のコードになる。
1 | <div ng-class="{second: true}" class="first">sample</div> |
ng-classを利用してsecondというclass属性を追加するコードになるが、条件をtrueではなくfalseにするとclass属性は追加されなくなる。
上の例はbool値を直接記述しているが、変数や条件式をダイレクトに書くこともできる。
以下の例は各行のdoneの値に応じてredというclass属性を設定する例になる。
1 2 3 4 | <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属性を追加することができる。
1 | <span ng-class="(value==true) ? 'blue' : 'red'" class='default'</span> |
numberが2の場合はblueを追加
1 | <span ng-class="(number==2) ? 'blue' : 'red'" class='default'</span> |
stringがfooではない場合はredを追加
1 | <span ng-class="(string!='foo') ? 'blue' : 'red'" class='default'</span> |
上のようなインライン方式の使い方ができるため、if文の条件式を書く感覚でng-classを動的に利用できる。
条件式の値はAngularJSの他のディレクティブで変更することができる。そのため、
1 2 | <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属性を追加・削除することもできる。