ng-classを使って条件によってスタイルを変更する[AngularJS]

最近AngularJSにはまってるので、AngularJSを勉強して覚えたことを書いていきます。

参考書籍: AngularJSアプリケーション開発ガイド

フロントのコーディングしていると、条件によって要素のスタイルを変えてやりたくなることがよくあります。

e.g.) 例えば、お気に入りボタンを押す前は文字色は黒で、押したあとは赤になる

これをAngularJSで実装できるng-classについて解説します

AngularJSでの実装

さきほどのお気に入りボタンを例に実装してみます。

<div ng-controller="MainsController">
    <span ng-class="red: isFavorite">お気に入りされてたら赤くなります。</span>
    <button ng-click="favorite()">お気に入り</button>
    <button ng-click="removeFavorite()">お気に入りから外す</button>
</div>
const MainsCtrl = angular.module('MainsController');
const MainsController = function(){
    $scope.isFavorite = false;
    $scope.favorite = function(){
        isFavorite = true;
    }
    $scope.removeFavorite = function(){
        isFavorite = false;
    }
}
.red{
    color: red;
}

解説

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

まとめ

ちょっとしたことが、ちょっとしたコードで出来るので簡単ですね。