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

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

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

index.html

<div ng-controller="MainsController">
    <span ng-class="red: isFavorite">お気に入りされてたら赤くなります。</span>
    <button ng-click="favorite()">お気に入り</button>
    <button ng-click="removeFavorite()">お気に入りから外す</button>
</div>

mains.js

var MainsCtrl = angular.module('MainsController');

var MainsController = function(){
    $scope.isFavorite = false;

    $scope.favorite = function(){
        isFavorite = true;
    }

    $scope.removeFavorite = function(){
        isFavorite = false;
    }
}

style.css

.red{
    color: red;
}

こんなけ。

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

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