AngularJS
ng-klasse richtlijn

Drie soorten expressies van ng-klasse

Angular ondersteunt drie soorten expressies in de ng-class richtlijn.

1. String

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

Als u een uitdrukking opgeeft die resulteert in een tekenreeks, zegt Angular dat deze moet worden behandeld als een $ scope-variabele. Angular controleert de $ scope en zoekt naar een variabele genaamd "MyClass". Welke tekst zich ook in "MyClass" bevindt, wordt de eigenlijke klassenaam die op deze <span> wordt toegepast. U kunt meerdere klassen opgeven door elke klasse met een spatie te scheiden.

In uw controller heeft u mogelijk een definitie die er als volgt uitziet:

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

Angular zal de uitdrukking MyClass evalueren en de $ scope-definitie vinden. Het zal de drie klassen "vet-rood", "verwijderd" en "fout" toepassen op het element <span> .

Door klassen op deze manier op te geven, kunt u eenvoudig de klassendefinities in uw controller wijzigen. Mogelijk moet u bijvoorbeeld de klasse wijzigen op basis van andere gebruikersinteracties of nieuwe gegevens die vanaf de server worden geladen. Als u veel uitdrukkingen moet evalueren, kunt u dit ook doen in een functie die de definitieve lijst met klassen in een variabele met $scope definieert. Dit kan eenvoudiger zijn dan proberen veel evaluaties in het kenmerk ng-class in uw HTML-sjabloon te persen.

2. Object

Dit is de meest gebruikte manier om klassen te definiëren met behulp van ng-class omdat u hiermee eenvoudig evaluaties kunt opgeven die bepalen welke klasse u wilt gebruiken.

Geef een object op dat sleutel / waarde-paren bevat. De sleutel is de klassenaam die wordt toegepast als de waarde (voorwaardelijk) als waar wordt geëvalueerd.

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

Met een uitdrukking die resulteert in een array kunt u een combinatie van tekenreeksen (zie # 1 hierboven) en voorwaardelijke objecten (# 2 hierboven) gebruiken.

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

Hiermee maakt u een tekstinvoerveld dat is gebonden aan de UserStyle , waarmee het gebruikerstype in elke klassenaam kan worden ingevoerd. Deze worden dynamisch toegepast op het element <p> terwijl de gebruiker typt. De gebruiker kan ook klikken op het selectievakje dat gegevensgebonden is aan de variabele voor het warning . Dit wordt ook dynamisch toegepast op het element <p> .