Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした