AngularJSng-classディレクティブ
例
<div>要素のクラスを変更します。
<select ng-model="home">
<option
value="sky">Sky</option>
<option
value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
定義と使用法
ディレクティブは、ng-class1つ以上のCSSクラスをHTML要素に動的にバインドします。
ディレクティブの値はng-class、文字列、オブジェクト、または配列にすることができます。
文字列の場合は、スペースで区切られた1つ以上のクラス名を含める必要があります。
オブジェクトとして、キーと値のペアが含まれている必要があります。ここで、キーは追加するクラスのクラス名であり、値はブール値です。クラスは、値がtrueに設定されている場合にのみ追加されます。
配列としては、両方の組み合わせにすることができます。各配列要素は、上記のように文字列またはオブジェクトのいずれかになります。
構文
<element ng-class="expression"></element>
すべてのHTML要素でサポートされています。
パラメータ値
| Value | Description |
|---|---|
| expression | An expression that returns one or more class names. |