AngularJS TIPS
要素のスタイルクラスを操作するには？（ng-class）
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。
別稿「TIPS：要素のスタイルプロパティを操作するには？」では、ng-styleディレクティブでスタイルプロパティ（style属性）を操作する方法を紹介しました。この方法は手軽で便利なのですが、問題もあります。というのも、スタイル定義がコードに混在している点です。コードに混在したスタイル定義はメンテナンスもしにくく、時として、背景色を1つ変えるにも、（デザイナーだけでなく）プログラマーの手を煩わせる原因となります。
よって、スタイル定義はできるだけスタイルクラスとしてスタイルシートに分離し、これを着脱するのがベターです。そして、そのスタイルクラスを操作するのがng-classディレクティブの役割です。
まずは、具体的な例として、ラジオボタンの選択に応じて、テキスト領域のスタイルを変更するサンプルを見てみましょう。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<style>
.normal {
color: #000;
background-color: #fff;
}
.warm {
color: #f00;
background-color: #ffc;
}
.cool {
color: #00f;
background-color: #cff;
}
</style>
</head>
<body ng-controller="MyController">
<form>
<label><input id="style1" name="style" type="radio"
ng-click="myClazz='normal'" />
ノーマル</label>
<label><input id="style2" name="style" type="radio"
ng-click="myClazz='warm'" />
暖色</label>
<label><input id="style3" name="style" type="radio"
ng-click="myClazz='cool'" />
寒色</label>
</form>
<div ng-class="myClazz">
スタイル定義はできるだけスタイルクラスとして...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
［暖色］から［寒色］に選択を切り替えると...
ng-class属性の最も基本的な使い方は、適用すべきクラスを文字列で指定することです。この例であれば、ラジオボタンのng-clickディレクティブを使って、ラジオボタンが選択されたタイミングで、ハッシュmyClazzの値を変更しています。myClazzは<div>要素のng-classディレクティブにひも付いていますので、ラジオボタンの選択によって、スタイルが変化するというわけです。
別稿のコードと比べると、スタイル定義が明確に分離されている分、コードの見通しが改善していることが分かるでしょう。
ng-classディレクティブに配列／ハッシュを渡す
ng-classディレクティブには、文字列だけでなく、配列やハッシュを渡すこともできます。
複数のスタイルクラスを指定する（配列）
ng-classディレクティブに複数のスタイルクラスを渡す場合には、配列で指定します。以下は、「class="blank frame backcolor"」と指定したのと同じ意味になります。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<style>
.blank {
color: #000;
margin: 10px;
padding: 10px;
}
.frame {
border: medium solid #f00;
}
.backcolor {
background-color: #ffc;
}
</style>
</head>
<body ng-controller="MyController">
<div ng-class="['blank', 'frame', 'backcolor']">
ng-classディレクティブには文字列だけでなく、配列やハッシュを...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
スタイルクラスのオンオフを可能にする（ハッシュ）
ng-classディレクティブに「スタイル名: ブール値」のハッシュを渡すことで、ブール値がtrueの場合にだけ適用するスタイルを表現できます。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
<style>
.blank {
color: #000;
margin: 10px;
padding: 10px;
}
.frame {
border: medium solid #f00;
}
.backcolor {
background-color: #ffc;
}
</style>
</head>
<body ng-controller="MyController">
<form>
<label><input id="style1" type="checkbox" ng-model="bBlank" />
余白</label>
<label><input id="style2" type="checkbox" ng-model="bFrame" />
枠線</label>
<label><input id="style3" type="checkbox" ng-model="bBackcolor" />
背景</label>
</form>
<div ng-class="{ blank: bBlank, frame: bFrame, backcolor: bBackcolor}">
ng-classディレクティブには文字列だけでなく、配列やハッシュを...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
}]);
</script>
</body>
</html>
|
チェックボックスの値（true／false）をハッシュにひも付けることで、チェックボックスのオン／オフに応じて、対応するスタイルクラスを着脱します。
なお、AngularJS 1.4以降では、配列とハッシュとを混在することも可能になりました。例えば以下は、blankスタイルだけは固定に、frame／backcolorだけをチェックボックスでオン／オフできるようにした例です。
|
<form>
<label><input id="style2" type="checkbox" ng-model="bFrame" />
枠線</label>
<label><input id="style3" type="checkbox" ng-model="bBackcolor" />
背景</label>
</form>
<div ng-class="[{ frame: bFrame, backcolor: bBackcolor}, 'blank']">
ng-classディレクティブには文字列だけでなく、配列やハッシュを...
</div>
|
処理対象：ディレクティブ（Directive） カテゴリ：基本
API：ngClass（ng-class）｜ngClick（ng-click） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第28回～第32回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
30. 【現在、表示中】≫ 要素のスタイルクラスを操作するには？（ng-class）
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。
31. 交互に異なるスタイルクラスを適用するには？（ng-class-odd／ng-class-even）
ng-class-even／ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。
