✅ Klasser og stiler i AngularJS

Innholdsfortegnelse

Måten vi kan bruke applikasjonene våre på og brukergrensesnittet kan innebære endringer i stilene, disse endringene gjenspeiles hovedsakelig i de mest moderne applikasjonene med endringer i leksjoner CSS av elementene, med dette kan vi klare å plassere farger, endre arrangement, etc., elementene våre HTML.
AngularJS lar oss gjøre disse endringene dynamisk når modellen endres, slik at vi kan koble hvordan applikasjonen ser ut som en helhet til driften, for dette har vi to måter, den ene bruker interpolasjon og den andre med direktivet ng-klasse.
I dette tilfellet, la oss forestille oss at vi har en CSS klasse, hvis vi ønsker å bruke det på elementet vårt på et bestemt tidspunkt eller handling kan vi bruke interpolasjonsnotasjonen av Vinklet {{}} slik at du kan bruke endringen med en funksjon som kjører på $ omfang kontrolleren.
For eksempel har vi en klasse som viser et element i grått for å vise at det ikke er aktivt:

 .meny-deaktivert-true {farge: grå; }

Hvis vi ønsker å bruke det på søknaden vår, vet vi at vi kan få elementet vårt til å følge tilstanden til direktivene som vi observerer:


Deaktiver

Nå lager vi innholdet i vårt Javascript, her skal vi endre eiendommen er funksjonshemmet hver gang vi klikker på elementet vårt:

 function MenuController ($ scope) {$ scope.isDisabled = false; $ omfang. disable = function () {$ scope.isDisabled = 'true'; }; }

Nå ser vi hvordan det ser ut når programmet starter:

Og nå når du klikker på deaktiver:

Vi var i stand til å observere hvordan det var endring av CSS klasse på en enkel måte og at kontrolleren håndterte alt.
En annen måte å bruke stilendringer på er med direktivet ng-klasse, dette gir oss litt mer fleksibilitet siden vi kan dra nytte av måten det fungerer på AngularJS dermed kan vi klare å evaluere forholdene, og avhengig av oppfyllelsen kan vi vise en eller annen klasse.
La oss se i det følgende eksemplet at vi ønsker å ha en advarselsklasse og en feilklasse, med dette kan vi til og med vise forskjellige meldinger slik at brukeren kan være klar over hva som skjer. Vi har CSS -klassene som vi vil bruke:

 .feil {bakgrunnsfarge: rød; } .varsel {bakgrunnsfarge: gul; }

Nå skal vi generere HTML, vil vi bruke i direktivet ng-klasse noen eiendommer feil: isError Y advarsel: isWarningDisse evalueringene er de som lar oss velge en eller annen klasse av de som vi har definert i CSS.
Så har vi en {{beskjed}} som viser den tilsvarende verdien som vi vil plassere i kontrolleren:

{{beskjed}}Simuler feil Simuler advarsel

Til slutt gjør vi arbeidet i Javascript:

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

Med dette vil vi da oppnå et resultat som følgende i nettleseren vår:

FORSTØRRE

Vi ser på konsollen i bildet som gjør oss til en ng-binding med varselklassen som er den vi har definert for advarslene, hvis vi klikker på Simuler feil deretter gjør du det samme med feilklassen. Med dette fullfører vi denne opplæringen, vi har allerede lært å koble CSS -stiler og klasser til applikasjonene våre AngularJS.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng