search
LoginSignup
65
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

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

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>

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
What you can do with signing up
65
Help us understand the problem. What are the problem?