Sadržaj
Način na koji možemo raditi s našim aplikacijama i korisničkim sučeljem može podrazumijevati promjene u stilovima, te se promjene uglavnom odražavaju u najsuvremenijim aplikacijama s promjenama u lekcije CSS elemenata, pomoću ovoga možemo postaviti boje, promijeniti raspored itd., naše elemente HTML.AngularJS omogućuje nam da dinamički unosimo te promjene pri promjeni modela, tako da možemo povezati kako aplikacija izgleda u cjelini sa svojim radom, za to imamo dva načina, jedan pomoću interpolacije, a drugi s direktivom ng-klase.
U ovom slučaju, zamislimo da imamo a CSS klasa, ako ga želimo primijeniti na naš element u određenom trenutku ili radnji možemo koristiti interpolacijski zapis od Ugaona {{}} tako da možete primijeniti promjenu s funkcijom koja se izvodi na $ opseg kontroler.
Na primjer, imamo klasu koja prikazuje element u sivoj boji kako bi pokazala da nije aktivan:
.menu-disabled-true {boja: siva; } Ako ga želimo primijeniti na našu aplikaciju, znamo da možemo učiniti da naš element uzme stanje njegovih direktiva dok promatramo:
- Deaktivirajte
Sada stvaramo sadržaj našeg Javascript, ovdje ćemo promijeniti vlasništvo je onemogućeno svaki put kad kliknemo na naš element:
funkcija MenuController ($ opseg) {$ scope.isDisabled = false; $ opseg. disable = function () {$ scope.isDisabled = 'true'; }; } Sada vidimo kako to izgleda pri pokretanju aplikacije:
Drugi način primjene promjena stila je direktiva ng-klase, to nam omogućuje malo više fleksibilnosti jer možemo iskoristiti način na koji radi AngularJS tako možemo uspjeti ocijeniti uvjete i ovisno o njihovom ispunjenju možemo prikazati jednu ili drugu klasu.
Pogledajmo u sljedećem primjeru da želimo imati klasu upozorenja i klasu pogreške, s tim čak možemo prikazati različite poruke kako bi korisnik mogao biti svjestan što se događa. Imamo CSS klase koje ćemo koristiti:
.pogreška {background-color: red; } .upozorenje {background-color: yellow; } Sada ćemo generirati HTML, koristit ćemo u direktivi ng-klase neka svojstva error: isError Y upozorenje: isUpozorenjeOve ocjene nam omogućuju da odaberemo jednu ili drugu klasu od onih koje smo definirali u CSS -u.
Tada imamo a {{poruka}} koja će pokazati odgovarajuću vrijednost koju ćemo postaviti u kontroler:
{{poruka}}Simuliraj pogrešku Simuliraj upozorenjeNa kraju radimo posao u Javascriptu:
funkcija ClasesController ($ opseg) {$ scope.isError = false; $ scope.isWarning = lažno; $ scope.showError = function () {$ scope.message = 'Ovo je pogreška!'; $ scope.isError = istina; $ scope.isWarning = lažno; }; $ scope.mostrarWarning = function () {$ scope. message = 'Samo upozorenje.'; $ scope.isWarning = true; $ scope.isError = lažno; }; } Time ćemo u našem pregledniku postići rezultat poput sljedećeg:
POVEĆAJTE
