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>