--- title: AngularJSでは、見た目を変更するのはCSSクラスで操作するのデフォ tags: JavaScript Angular author: atusi slide: false --- # ng-class をマスターせよ htmlタグにng-classプロパティーをつけると、AngularでBind可能なCSSクラスタグになる。 静的な書き方だと、以下のようになりますがAngularを使用する意味が無いです。 ```
たいとる
``` UIの状態を動的に変えるには、Dom要素を取ってきて、ステータスに応じて適切なクラスを判断し(余計なのがついてたらremoveしたりして)、ClassをDom要素に反映させるという手順が一般的なやり方だと思います。 しかし、Angularではモデルのステータスに応じて自動でクラスを当ててくれます。 ```
アイテム名
``` 上記サンプルでは、item.flagがtrueかfalseで、item_onかitem_offのクラスが自動でつきます。どこにDom要素があるのか?とか、モデルがいつアップデートされたとか全く考えないでいいです。ただ、黙々とモデルがアップデートさたら適宜DomにClassが付け外しされます。 逆にUIの操作をモデル側に反映させて、Classを変えるために、今回は、mouse_enterとmouse_leaveを使いました。特定のDiv要素にmouse_enterしたら、その要素が保持しているFlagをTrueにして、mouse_leaveされるとFlagがFalseされます。FlagがTrue,Falseに変わるので、勝手にクラスが割り当てられます。 ``` ng-class="gc_color='gc_normal'" ng-mouseenter="gc_color=change_color(gg)" ng-mouseleave="gc_color=change_color(gg)" ``` ng-classには、クラスのエイリアス(gc_color)みたいなのが割り当てられるのでそれを割り当てといて、その後のイベントでエイリアスに文字列突っ込むことで、ng-classに突っ込んだことにしてくれます。 ##全部盛り ```html:

team cana2c

マウスの動きでクラス変えまくり

{{ yoko.flg }}
```