AngularJS
ng-klassens direktiv

Tre typer av uttryck i ng-klass

Angular stöder tre typer av uttryck i ng-class direktiv.

1. Sträng

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

Att ange ett uttryck som utvärderas till en sträng säger Angular att behandla det som en $ scope-variabel. Angular kommer att kontrollera $ -omfånget och leta efter en variabel som heter "MyClass". Oavsett text som finns i "MyClass" kommer att bli det faktiska klassnamnet som används på detta <span> . Du kan ange flera klasser genom att separera varje klass med ett mellanslag.

I din controller kan du ha en definition som ser ut så här:

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

Angular kommer att utvärdera uttrycket MyClass och hitta definitionen på $ scope. Det kommer att tillämpa de tre klasserna "fet-röd", "raderad" och "fel" på <span> -elementet.

Om du anger klasser på detta sätt kan du enkelt ändra klassdefinitionerna i din controller. Du kan till exempel behöva ändra klassen baserat på andra användarinteraktioner eller nya data som laddas från servern. Om du har en hel del uttryck att utvärdera kan du också göra det i en funktion som definierar den slutliga listan över klasser i en $scope variabel. Detta kan vara enklare än att försöka pressa många utvärderingar i ng-class klassattributet i din HTML-mall.

2. Objekt

Detta är det vanligaste sättet att definiera klasser med ng-class eftersom det enkelt låter dig ange utvärderingar som avgör vilken klass du ska använda.

Ange ett objekt som innehåller nyckelvärdespar. Nyckeln är klassnamnet som kommer att tillämpas om värdet (en villkorad) utvärderas som sant.

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

Med ett uttryck som utvärderas till en matris kan du använda en kombination av strängar (se # 1 ovan) och villkorade objekt (# 2 ovan).

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

Detta skapar ett textinmatningsfält bundet till omfattningsvariabeln UserStyle som låter användaren skriva in alla klassnamn (er). Dessa kommer att tillämpas dynamiskt på <p> -elementet som användartyper. Användaren kan också klicka på kryssrutan som är databunden till warning . Detta kommer också att tillämpas dynamiskt på <p> -elementet.