AngularJS ng-class 指令

定義と使用方法

ng-class この指令は、1つまたは複数のCSSクラスをHTML要素に動的にバインドするために使用されます。

ng-class 命令の値は文字列、オブジェクト、または配列でできます。

それが文字列の場合、スペースで区切られたクラス名が1つ以上含まれています。

オブジェクトとして、キーと値の対を含む必要があります。キーは追加したいクラスのクラス名であり、値はボールルー値です。値がtrueに設定されている場合のみ、そのクラスが追加されます。

配列として、どちらの組み合わせでも可能です。各配列要素は上記の説明の文字列またはオブジェクトで構成できます。

例

<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>

自分で試してみる

構文

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

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

パラメータ