最近AngularJSにはまってるので、AngularJSを勉強して覚えたことを書いていきます。
参考書籍: AngularJSアプリケーション開発ガイド
フロントのコーディングしていると、条件によって要素のスタイルを変えてやりたくなることがよくあります。
e.g.) 例えば、お気に入りボタンを押す前は文字色は黒で、押したあとは赤になる
これをAngularJSで実装できるng-classについて解説します
目次
さきほどのお気に入りボタンを例に実装してみます。
<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"とすると、isFavoriteがtrueのときだけ、.redクラスが付くようになります。一般にng-class="[付けたいクラス名]: [フラグの変数名]"です。
ちょっとしたことが、ちょっとしたコードで出来るので簡単ですね。