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>

AngularJSでは、見た目を変更するのはCSSクラスで操作するのデフォ

ng-class をマスターせよ

全部盛り