Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

要素のスタイルクラスを操作するには?(ng-class)

2015年10月26日

スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:要素のスタイルプロパティを操作するには?」では、ng-styleディレクティブでスタイルプロパティ(style属性)を操作する方法を紹介しました。この方法は手軽で便利なのですが、問題もあります。というのも、スタイル定義がコードに混在している点です。コードに混在したスタイル定義はメンテナンスもしにくく、時として、背景色を1つ変えるにも、(デザイナーだけでなく)プログラマーの手を煩わせる原因となります。

 よって、スタイル定義はできるだけスタイルクラスとしてスタイルシートに分離し、これを着脱するのがベターです。そして、そのスタイルクラスを操作するのがng-classディレクティブの役割です。

 まずは、具体的な例として、ラジオボタンの選択に応じて、テキスト領域のスタイルを変更するサンプルを見てみましょう。

HTML
<!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>
要素のスタイルを動的に変更するためのコード(clazz.html)
[暖色]から[寒色]に選択を切り替えると...

[暖色]から[寒色]に選択を切り替えると...

選択に応じてテキスト領域のスタイルが変化

 ng-class属性の最も基本的な使い方は、適用すべきクラスを文字列で指定することです。この例であれば、ラジオボタンのng-clickディレクティブを使って、ラジオボタンが選択されたタイミングで、ハッシュmyClazzの値を変更しています。myClazz<div>要素のng-classディレクティブにひも付いていますので、ラジオボタンの選択によって、スタイルが変化するというわけです。

 別稿のコードと比べると、スタイル定義が明確に分離されている分、コードの見通しが改善していることが分かるでしょう。

ng-classディレクティブに配列/ハッシュを渡す

 ng-classディレクティブには、文字列だけでなく、配列やハッシュを渡すこともできます。

複数のスタイルクラスを指定する(配列)

 ng-classディレクティブに複数のスタイルクラスを渡す場合には、配列で指定します。以下は、「class="blank frame backcolor"」と指定したのと同じ意味になります。

HTML
<!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>
複数のスタイルクラスを渡すコード(style_array.html)
スタイルクラスblank/frame/backcolorを適用

スタイルクラスのオンオフを可能にする(ハッシュ)

 ng-classディレクティブに「スタイル名: ブール値」のハッシュを渡すことで、ブール値がtrueの場合にだけ適用するスタイルを表現できます。

HTML
<!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>
スタイルクラスのオン/オフを切り替えるためのコード(style_hash.html)
チェックボックスのオン/オフでスタイルを着脱

 チェックボックスの値(true/false)をハッシュにひも付けることで、チェックボックスのオン/オフに応じて、対応するスタイルクラスを着脱します。

 なお、AngularJS 1.4以降では、配列とハッシュとを混在することも可能になりました。例えば以下は、blankスタイルだけは固定に、framebackcolorだけをチェックボックスでオン/オフできるようにした例です。

HTML
<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>
スタイルクラスのオン/オフを切り替えるためのコード(style_hash2.html)
blankは固定、他のスタイルはチェックボックスのオンオフで着脱可能
処理対象:スタイルプロパティ カテゴリ:基本
処理対象:ディレクティブ(Directive) カテゴリ:基本
API:ngClass(ng-class)|ngClick(ng-click) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第28回~第32回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
28. 配列からm~n件目の要素を取り出すには?(limitTo)

limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。

AngularJS TIPS
29. 要素のスタイルプロパティを操作するには?(ng-style)

ng-styleディレクティブを使って、要素のスタイル(style属性)を設定・変更する方法を説明する。

AngularJS TIPS
30. 【現在、表示中】≫ 要素のスタイルクラスを操作するには?(ng-class)

スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。

AngularJS TIPS
31. 交互に異なるスタイルクラスを適用するには?(ng-class-odd/ng-class-even)

ng-class-even/ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。

AngularJS TIPS
32. 配列の内容を順に出力するには?(ng-repeat)

配列の内容を順に処理して出力できるng-repeatディレクティブの基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!