最近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"
とすると、isFavorite
がtrue
のときだけ、red
クラスが付くことになります。一般にng-class="[付けたいクラス名]: [フラグの変数名]"
になります。
ちょっとしたことが、ちょっとで出来るって素晴らしいです。
コメントを残す