AngularJS
direttiva ng-class

Tre tipi di espressioni di classe ng

Angolare supporta tre tipi di espressioni nella direttiva ng-class .

1. Stringa

<span ng-class="MyClass">Sample Text</span>

La specifica di un'espressione che valuta una stringa indica a Angular di trattarla come una variabile $ scope. Angular controllerà l'ambito $ e cercherà una variabile chiamata "MyClass". Qualsiasi testo sia contenuto in "MyClass" diventerà il nome effettivo della classe che viene applicato a questo <span> . Puoi specificare più classi separando ogni classe con uno spazio.

Nel tuo controller, potresti avere una definizione simile a questa:

$scope.MyClass = "bold-red deleted error";

Angular valuterà l'espressione MyClass e troverà la definizione $ scope. Applicherà le tre classi "bold-red", "deleted" e "error" all'elemento <span> .

Specificando le classi in questo modo è possibile modificare facilmente le definizioni di classe nel controller. Ad esempio, potrebbe essere necessario modificare la classe in base ad altre interazioni utente o nuovi dati caricati dal server. Inoltre, se hai molte espressioni da valutare, puoi farlo in una funzione che definisce l'elenco finale di classi in una variabile $scope . Questo può essere più facile che provare a spremere molte valutazioni nell'attributo ng-class nel modello HTML.

2. Oggetto

Questo è il modo più comunemente usato per definire le classi usando ng-class perché consente facilmente di specificare valutazioni che determinano quale classe usare.

Specificare un oggetto contenente coppie chiave-valore. La chiave è il nome della classe che verrà applicato se il valore (un condizionale) viene valutato come true.

<style>
    .red { color: red; font-weight: bold; }
    .blue { color: blue; }
    .green { color: green; }
    .highlighted { background-color: yellow; color: black; }
</style>

<span ng-class="{ red: ShowRed, blue: ShowBlue, green: ShowGreen, highlighted: IsHighlighted }">Sample Text</span>

<div>Red: <input type="checkbox" ng-model="ShowRed"></div>
<div>Green: <input type="checkbox" ng-model="ShowGreen"></div>
<div>Blue: <input type="checkbox" ng-model="ShowBlue"></div>
<div>Highlight: <input type="checkbox" ng-model="IsHighlighted"></div>

3. Matrice

Un'espressione che valuta un array consente di utilizzare una combinazione di stringhe (vedere n. 1 sopra) e oggetti condizionali (n. 2 sopra).

<style>
    .bold { font-weight: bold; }
    .strike { text-decoration: line-through; }
    .orange { color: orange; }
</style>

<p ng-class="[ UserStyle, {orange: warning} ]">Array of Both Expression Types</p>
<input ng-model="UserStyle" placeholder="Type 'bold' and/or 'strike'"><br>
<label><input type="checkbox" ng-model="warning"> warning (apply "orange" class)</label>

Ciò crea un campo di input di testo associato alla variabile scope UserStyle che consente all'utente di digitare qualsiasi nome di classe. Questi saranno applicati dinamicamente all'elemento <p> mentre l'utente digita. Inoltre, l'utente può fare clic sulla casella di controllo associata ai dati alla variabile dell'ambito di warning . Questo sarà anche applicato dinamicamente all'elemento <p> .