AngularJS
ng-classディレクティブ

3種類のng-class式

Angularは、 ng-classディレクティブの3種類の式をサポートしています。

1.文字列

<span ng-class="MyClass">Sample Text</span>

文字列に評価される式を指定すると、$ scope変数として扱うようにAngularに指示します。 Angularは$スコープをチェックし、 "MyClass"という変数を探します。 "MyClass"に含まれるテキストは、この<span>適用される実際のクラス名になり<span> 。各クラスをスペースで区切って複数のクラスを指定することができます。

あなたのコントローラには、次のような定義があります：

$scope.MyClass = "bold-red deleted error";

AngularはMyClassという式を評価し、$ scope定義を見つけます。 <span>要素に "bold-red"、 "deleted"、 "error"の3つのクラスを適用します。

このようにクラスを指定すると、コントローラ内のクラス定義を簡単に変更できます。たとえば、他のユーザー操作やサーバーからロードされた新しいデータに基づいてクラスを変更する必要があります。また、評価する式がたくさんある場合は、 $scope変数のクラスの最終リストを定義する関数で評価できます。これは、HTMLテンプレートのng-class属性に多くの評価を絞り込むよりも簡単です。

2.オブジェクト

これは、どのクラスを使用するかを決定する評価を簡単に指定できるため、 ng-classを使用してクラスを定義する最も一般的な方法です。

キーと値のペアを含むオブジェクトを指定します。キーは、値（条件付き）がtrueと評価された場合に適用されるクラス名です。

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3.アレイ

配列に評価される式では、 文字列 （上記の＃1を参照）と条件付きオブジェクト （上記の＃2）の組み合わせを使用できます。

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

これにより、ユーザーが任意のクラス名を入力できるスコープ変数UserStyleバインドされたテキスト入力フィールドが作成されます。これらは、ユーザータイプとして<p>要素に動的に適用されます。また、 warningスコープ変数にデータバインドされているチェックボックスをクリックすることもできます。これは<p>要素にも動的に適用されます。