AngularJS ng-class指令

AngularJS 参考手册

AngularJS 实例

<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-classディレクティブは、HTML要素に1つまたは複数のCSSクラスを動的にバインドするために使用されます。

ng-classディレクティブの値には、文字列、オブジェクト、または配列を使用できます。

文字列の場合、複数のクラス名はスペースで区切ります。

オブジェクトの場合、キーと値のペアを使用します。キーは追加したいクラス名で、値はブール値です。値がtrueの場合のみクラスが追加されます。

配列の場合、文字列またはオブジェクトを組み合わせて構成できます。配列の要素は文字列またはオブジェクトにできます。

语法

<element ng-class="expression"></element>

すべてのHTML要素でサポートされています。

参数值

值 描述
expression 式は1つ以上のクラス名を返します。

AngularJS 参考手册

其他扩展