Klassen en stijlen in AngularJS

De manier waarop we onze applicaties en de gebruikersinterface kunnen gebruiken, kan veranderingen in de stijlen impliceren, deze veranderingen worden meestal weerspiegeld in de modernste applicaties met veranderingen in de lessen CSS van de elementen, hiermee kunnen we kleuren plaatsen, de opstelling wijzigen, enz., Onze elementen HTML.
AngularJS stelt ons in staat om deze wijzigingen dynamisch aan te brengen wanneer het model verandert, zodat we het uiterlijk van de applicatie als geheel kunnen koppelen aan de werking ervan, hiervoor hebben we twee manieren, een met interpolatie en de tweede met de richtlijn ng-klasse.
Laten we ons in dit geval voorstellen dat we een CSS-klasse, als we het op een bepaald moment of een bepaalde actie op ons element willen toepassen, kunnen we de interpolatienotatie van gebruiken Hoekig {{}} zodat u de wijziging kunt toepassen met een functie die draait op de $ bereik controleur.
We hebben bijvoorbeeld een klasse die een element in grijs toont om aan te geven dat het niet actief is:

 .menu-disabled-true {kleur: grijs; } 

Als we het op onze toepassing willen toepassen, weten we dat we ons element de staat van zijn richtlijnen kunnen laten aannemen zoals we observeren:

Deactiveren

Nu maken we de inhoud van onze Javascript, hier gaan we de eigenschap veranderen is gehandicapt elke keer dat we op ons element klikken:

 functie MenuController ($ scope) {$ scope.isDisabled = false; $ bereik. uitschakelen = functie () {$ scope.isDisabled = 'true'; }; } 

Nu zien we hoe het eruit ziet bij het starten van de applicatie:

En nu wanneer u op deactiveren klikt:

We waren in staat om te observeren hoe er was de verandering van de CSS-klasse op een eenvoudige manier en dat de controller alles regelde.
Een andere manier om stijlveranderingen toe te passen is met de richtlijn ng-klasse, dit geeft ons wat meer flexibiliteit omdat we kunnen profiteren van de manier waarop het werkt AngularJS zo kunnen we voorwaarden evalueren en afhankelijk van hun vervulling kunnen we de ene of de andere klasse laten zien.
Laten we in het volgende voorbeeld zien dat we een waarschuwingsklasse en een foutklasse willen hebben, hiermee kunnen we zelfs verschillende berichten laten zien zodat de gebruiker op de hoogte kan zijn van wat er gebeurt. We hebben de CSS-klassen die we zullen gebruiken:

 .fout {achtergrondkleur: rood; } .waarschuwing {achtergrondkleur: geel; } 

Nu gaan we de genereren HTML, zullen we gebruiken in de richtlijn ng-klasse sommige eigenschappen fout: isError Y waarschuwing: isWaarschuwingDeze evaluaties stellen ons in staat om de ene of de andere klasse te kiezen die we in de CSS hebben gedefinieerd.
Dan hebben we een {{bericht}} die de overeenkomstige waarde toont die we in de controller zullen plaatsen:

{{bericht}}Fout simuleren Waarschuwing simuleren

Tot slot doen we het werk in Javascript:

 functie ClasesController ($ scope) {$ scope.isError = false; $ scope.isWarning = onwaar; $ scope.showError = function () {$ scope.message = 'Dit is een fout!'; $ scope.isError = waar; $ scope.isWarning = onwaar; }; $ scope.mostrarWarning = function () {$ scope. message = 'Gewoon een waarschuwing.'; $ scope.isWarning = waar; $ scope.isError = onwaar; }; } 

Hiermee bereiken we dan een resultaat als het volgende in onze browser:

VERGROTEN

We kijken naar de console in de afbeelding die ons een ng-binding met de waarschuwingsklasse die we hebben gedefinieerd voor de waarschuwingen, als we klikken op Simuleer fout doe dan hetzelfde met de foutklasse. Hiermee sluiten we deze tutorial af, we hebben al geleerd om CSS stijlen en klassen te koppelen met onze applicaties gemaakt in AngularJS.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven