ng-class をマスターせよ
htmlタグにng-classプロパティーをつけると、AngularでBind可能なCSSクラスタグになる。
静的な書き方だと、以下のようになりますがAngularを使用する意味が無いです。
<div ng-class='header'>たいとる</div>
UIの状態を動的に変えるには、Dom要素を取ってきて、ステータスに応じて適切なクラスを判断し（余計なのがついてたらremoveしたりして）、ClassをDom要素に反映させるという手順が一般的なやり方だと思います。
しかし、Angularではモデルのステータスに応じて自動でクラスを当ててくれます。
<div ng-class={"item_on":item.flg, "item_off":item.flg}>アイテム名</div>
上記サンプルでは、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に突っ込んだことにしてくれます。
##全部盛り
<!DOCTYPE HTML>
<html lang="en-US" ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<style type="text/css">
div,body {
padding: 0px;
margin: 0px;
}
.dan{
display: inline-block;
width: 50px;
height: 50px;
margin: 0px;
padding: 0px;
}
.gc_red{
background-color: red;
-webkit-transition-duration: 0.1s;
}
.gc_normal{
background-color: white;
-webkit-transition-duration: 3s;
}
</style>
<script>
var mainCtrl = function($scope){
var data_grid = []
for (var dan=0; dan<20; dan++){
var temp_arr = [];
for (var retu=0; retu < 20; retu++){
temp_arr[retu] = [retu, false]
}
data_grid.push(temp_arr)
}
$scope.grid_arr = data_grid;
console.info(data_grid)
$scope.change_color = function(elem){
var ret;
if (elem.flg==true){
ret = 'gc_normal'
}else{
ret = 'gc_red';
}
elem.flg = !elem.flg
return ret
}
}
</script>
</head>
<body ng-controller=mainCtrl>
<h1>team cana2c</h1>
<h2>マウスの動きでクラス変えまくり</h2>
<div id="all">
<div ng-repeat="tate in grid_arr" class='retu'>
<div ng-repeat="yoko in tate" class="dan"
ng-class="gc_color='gc_normal"
ng-class={"white":yoko.flg, "red":!yoko.flag}
ng-mouseenter="gc_color=change_color(yoko)"
ng-mouseleave="gc_color=change_color(yoko)"
> {{ yoko.flg }}</div>
</div>
</div>
</body>
</html>