AngularJS ng-class-instructie

Definitie en gebruik

ng-class De instructie wordt gebruikt om een of meerdere CSS-klassen dynamisch te koppelen aan een HTML-element.

ng-class De waarde van de instructie kan een string, object of array zijn.

Als het een string is, moet het een of meerdere classenamen bevatten, gescheiden door spaties.

Als object, moet het bevatten van sleutel-waarde paren, waarbij de sleutel de naam van de klasse is die je wilt toevoegen, en de waarde een booleaanse waarde. Alleen wanneer de waarde ingesteld is op true, wordt de klasse toegevoegd.

Als array kan het een combinatie van beide zijn. Elke array-element kan een van de hierboven beschreven strings of objecten zijn.

Voorbeeld

Wijzig de klasse van het <div>-element:

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

Probeer het zelf uit

Syntaxis

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

Alle HTML-elementen ondersteunen dit.

Parameters