Klasser og stilarter i AngularJS

Den måde, hvorpå vi kan arbejde vores applikationer og dets brugergrænseflade kan indebære ændringer i stilarterne, disse ændringer afspejles for det meste i de mest moderne applikationer med ændringer i lektioner CSS af elementerne, med dette kan vi nå at placere farver, ændre arrangement osv., vores elementer HTML.
VinkelJS giver os mulighed for at foretage disse ændringer dynamisk, når modellen ændres, så vi kan knytte, hvordan applikationen ser ud som en helhed, til dens drift, for dette har vi to måder, en ved hjælp af interpolation og den anden med direktivet ng-klasse.
I dette tilfælde, lad os forestille os, at vi har en CSS klasse, hvis vi ønsker at anvende det på vores element på et bestemt tidspunkt eller handling, kan vi bruge interpolationsnotationen af Vinklet {{}} så du kan anvende ændringen med en funktion, der kører på $ omfang controller.
For eksempel har vi en klasse, der viser et element i gråt for at vise, at det ikke er aktivt:

 .menu-deaktiveret-sand {farve: grå; } 

Hvis vi ønsker at anvende det på vores ansøgning, ved vi, at vi kan få vores element til at tage status af dets direktiver, når vi observerer:

Deaktiver

Nu laver vi indholdet af vores Javascript, her skal vi ændre ejendommen er deaktiveret hver gang vi klikker på vores element:

 funktion MenuController ($ scope) {$ scope.isDisabled = false; $ omfang. deaktivere = funktion () {$ scope.isDisabled = 'true'; }; } 

Nu ser vi, hvordan det ser ud, når applikationen startes:

Og når du nu klikker på deaktiver:

Vi var i stand til at observere, hvordan der var ændringen af CSS klasse på en enkel måde, og at controlleren håndterede alt.
En anden måde at anvende stilændringer på er med direktivet ng-klasse, dette giver os lidt mere fleksibilitet, da vi kan drage fordel af den måde, det fungerer på VinkelJS dermed kan vi formå at evaluere forholdene og afhængigt af deres opfyldelse kan vi vise en eller anden klasse.
Lad os se i det følgende eksempel, at vi ønsker at have en advarselsklasse og en fejlklasse, med dette kan vi endda vise forskellige meddelelser, så brugeren kan være opmærksom på, hvad der sker. Vi har CSS -klasser, som vi vil bruge:

 .fejl {baggrundsfarve: rød; } .varsel {baggrundsfarve: gul; } 

Nu skal vi generere HTML, vil vi bruge i direktivet ng-klasse nogle ejendomme fejl: isError Y advarsel: isWarningDisse evalueringer er dem, der giver os mulighed for at vælge en eller anden klasse af dem, som vi har defineret i CSS.
Så har vi en {{besked}} som viser den tilsvarende værdi, som vi vil placere i controlleren:

{{besked}}Simuler fejl Simuler advarsel

Endelig gør vi arbejdet i Javascript:

 funktion ClasesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Dette er en fejl!'; $ scope.isError = true; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Bare en advarsel.'; $ scope.isWarning = true; $ scope.isError = false; }; } 

Med dette vil vi derefter opnå et resultat som følgende i vores browser:

FORSTØRRE

Vi ser på konsollen i billedet, der gør os til en ng-binding med den advarselsklasse, som er den, vi har defineret til advarslerne, hvis vi klikker på Simuler fejl gør derefter det samme med fejlklassen. Med dette afslutter vi denne vejledning, vi har allerede lært at forbinde CSS -stilarter og klasser med vores applikationer, der er lavet i VinkelJS.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt