Innehållsförteckning
Det sätt på vilket vi kan arbeta våra applikationer och dess användargränssnitt kan innebära förändringar i stilarna, dessa förändringar återspeglas mestadels i de mest moderna applikationerna med förändringar i lektioner CSS av elementen, med detta kan vi lyckas placera färger, ändra arrangemang etc., våra element HTML.AngularJS tillåter oss att göra dessa ändringar dynamiskt när modellen ändras, så att vi kan koppla hur applikationen ser ut i sin helhet till dess funktion, för detta har vi två sätt, en med interpolering och den andra med direktivet ng-klass.
I det här fallet, låt oss föreställa oss att vi har en CSS -klass, om vi vill tillämpa det på vårt element vid ett visst ögonblick eller en handling kan vi använda interpolationsnotationen av Vinklad {{}} så att du kan tillämpa ändringen med en funktion som körs på $ omfattning kontroller.
Till exempel har vi en klass som visar ett element i grått för att visa att det inte är aktivt:
.meny-inaktiverad-true {färg: grå; } Om vi vill tillämpa det på vår ansökan, vet vi att vi kan få vårt element att ta del av dess direktiv när vi observerar:
- Avaktivera
Nu gör vi innehållet i vårt Javascript, här ska vi ändra fastigheten är ur funktion varje gång vi klickar på vårt element:
function MenuController ($ scope) {$ scope.isDisabled = false; $ omfattning. disable = function () {$ scope.isDisabled = 'true'; }; } Nu ser vi hur det ser ut när programmet startas:
Ett annat sätt att tillämpa stiländringar är med direktivet ng-klass, detta ger oss lite mer flexibilitet eftersom vi kan dra nytta av hur det fungerar AngularJS så kan vi lyckas utvärdera förhållanden och beroende på hur de uppfylls kan vi visa en eller annan klass.
Låt oss se i följande exempel att vi vill ha en varningsklass och en felklass, med detta kan vi till och med visa olika meddelanden så att användaren kan vara medveten om vad som händer. Vi har CSS -klasserna som vi kommer att använda:
.fel {bakgrundsfärg: röd; } .varning {bakgrundsfärg: gul; } Nu ska vi generera HTML, kommer vi att använda i direktivet ng-klass några fastigheter fel: isError Y varning: isWarningDessa utvärderingar är de som gör att vi kan välja en eller annan klass av de som vi har definierat i CSS.
Då har vi en {{meddelande}} som visar motsvarande värde som vi kommer att placera i regulatorn:
{{meddelande}}Simulera fel Simulera varningSlutligen gör vi arbetet i Javascript:
function ClasesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Detta är ett fel!'; $ scope.isError = true; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Bara en varning.'; $ scope.isWarning = true; $ scope.isError = false; }; } Med detta kommer vi då att uppnå ett resultat som följande i vår webbläsare:
FÖRSTORA
