12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[小ネタ][angularjs] ng-classで複数のクラス付を制御する

Last updated at Posted at 2015-04-08

ひとつのクラスを制御したい場合

変数hogeがtrueかfalseかで、currentを付ける場合、
以下のような書き方をします。

%div( ng-class="{ 'current': hoge }")
  • hogeがtrueの場合、cssのクラスである.currentがdivにアサインされる。
  • hogeがfalseの場合、cssのクラスである.currentはdivにつかない。

を実現します。

複数のクラスを制御したい

複数の場合、記述方法に迷いますが、下記でいけます。

%div( ng-class="{ 'current': hoge, 'changing': moge }")

基本angularのoptionに入るのはobjectなので、
迷ったらobjectの記述を書けば大抵うまくいきます。

ng-styleなど特に、
cssの記法かjsのobjectの書き方なのか迷いますが、
ng-styleに入るのもobjectです。
cssの記法で書くとうんともすんともしません、
jsのobjectとcssに記法がびみょ〜に似ているので注意です..(俺だけかも)

12
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?