最近AngularJSにはまってるので、ちょいちょい、AngularJSを勉強して覚えたことを書いていこうかなーと思います。

よくJavaScriptでフロントのコーディングしてたら、条件によってスタイルを変えてやりたくなることが多いです。例えば、お気に入りボタンを押す前は文字色は黒だけど、押したあとは赤になるとか。JQueryでやると、addClassやらremoveClassやら使って結構面倒くさい。toggleClassっていうのもあるけど、何らかの要因で2回呼ばれてしまったら・・・なんてことを考えるとちょっと不安。

そんな不安もAngularJSのng-classを使ってやればすぐに解決します。さっきのお気に入りボタンの例を使って、やってみます。

index.html

mains.js

style.css

こんなけ。

要は、ng-class="red: isFavorite"とすると、isFavoritetrueのときだけ、redクラスが付くことになります。一般にng-class="[付けたいクラス名]: [フラグの変数名]"になります。

ちょっとしたことが、ちょっとで出来るって素晴らしいです。