追加するすべてのクラスを表す式をデータバインディングすることにより、HTML要素にCSSクラスを動的に設定できます。

ディレクティブは、式が3つのタイプのどれに評価されるかに応じて、3つの異なる方法で動作します。

1. 式が文字列と評価される場合、文字列は1つ以上のスペース区切りのクラス名である必要があります。
2. 式がオブジェクトに評価される場合、真の値を持つオブジェクトのキーと値のペアごとに、対応するキーがクラス名として使用されます。
3. 式が配列と評価される場合、配列の各要素は、タイプ1のような文字列、またはタイプ2のようなオブジェクトのいずれかである必要があります。つまり、配列内で文字列とオブジェクトを混在させて、内容をより細かく制御できます。 CSSクラスが表示されます。この例については、以下のコードを参照してください。

特定のクラスがすでに設定されている場合、ディレクティブは重複するクラスを追加しません。

式が変更されると、以前に追加されたクラスが削除され、新しいクラスが追加されます。

使用法

• 属性として：

  <ANY
    ng-class="expression">
  ...
  </ANY>
  

• CSSクラスとして：

  <ANY class="ng-class: expression;"> ... </ANY>
  

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

<div ng-class="{ blank: bBlank, frame: bFrame, backcolor: bBackcolor}">

配列とハッシュとを混在することも可能

<div ng-class="[{ frame: bFrame, backcolor: bBackcolor}, 'blank']">

ng-styleよりも推奨（HTMLにStyleがまじるから）

参考

• https://www.buildinsider.net/web/angularjstips/0030