English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Manuale di riferimento AngularJS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<style>
.sky {
color: white;
background-color: lightblue;
padding: 20px;
font-family: "Courier New";
}
.tomato {
background-color: coral;
padding: 40px;
font-family: Verdana;
}
</style>
</head>
<body ng-app="">
<p>Scegli un tipo:</p>
<select ng-model="home">
<option value="sky">Colore cielo</option>
<option value="tomato">Colore pomodoro</option>
</select>
<div ng-class="home">
<h1>Benvenuti a casa!</h1>
<p>Mi piace!</p>
</div>
</body>
</html>Prova a vedere ‹/›ng-class La direttiva viene utilizzata per bind dynamicamente una o più classi CSS agli elementi HTML.
ng-class Il valore della direttiva può essere una stringa, un oggetto o un array.
Se è una stringa, le classi multiple sono separate da spazi.
Se è un oggetto, è necessario utilizzare key-value pair, key è il nome della classe che si desidera aggiungere, value è un valore booleano. La classe viene aggiunta solo se value è true.
Se è un array, può essere composto da una combinazione di stringhe o oggetti, gli elementi dell'array possono essere stringhe o oggetti.
<element ng-class="espressione"></element>
Tutti gli elementi HTML supportano.
| Valore | Descrizione |
|---|---|
| espressione | L'espressione restituisce una o più classi. |