Obsah
Způsob, jakým můžeme pracovat s našimi aplikacemi a jeho uživatelské rozhraní, může znamenat změny ve stylech, tyto změny se většinou projevují v nejmodernějších aplikacích se změnami v lekce CSS prvků, pomocí kterých dokážeme umístit barvy, změnit uspořádání atd., naše prvky HTML.AngularJS umožňuje nám provádět tyto změny dynamicky, když se model mění, takže můžeme propojit, jak aplikace vypadá jako celek, s jejím fungováním, proto máme dva způsoby, jeden pomocí interpolace a druhý se směrnicí třída ng.
V tomto případě si představme, že máme a CSS třída, pokud ji chceme v určitém okamžiku nebo akci aplikovat na náš prvek, můžeme použít interpolační notaci Úhlová {{}} takže změnu můžete použít pomocí funkce, která běží na $ rozsah ovladač.
Například máme třídu, která zobrazuje prvek šedě, aby ukázala, že není aktivní:
.menu-disabled-true {barva: šedá; } Pokud ji chceme aplikovat na naši aplikaci, víme, že můžeme přimět náš prvek, aby převzal stav svých směrnic, jak pozorujeme:
- Deaktivovat
Nyní vytvoříme obsah našich Javascript, zde budeme měnit vlastnost je Zakázáno pokaždé, když klikneme na náš prvek:
funkce MenuController ($ scope) {$ scope.isDisabled = false; $ rozsah. disable = function () {$ scope.isDisabled = 'true'; }; } Nyní vidíme, jak to vypadá při spuštění aplikace:
Dalším způsobem, jak aplikovat změny stylu, je směrnice třída ng, to nám umožňuje trochu větší flexibilitu, protože můžeme využít způsob, jakým to funguje AngularJS dokážeme tedy vyhodnotit podmínky a v závislosti na jejich splnění můžeme ukázat jednu nebo druhou třídu.
Podívejme se v následujícím příkladu na to, že chceme mít třídu varování a třídu chyb, pomocí které můžeme dokonce zobrazovat různé zprávy, aby si uživatel mohl být vědom toho, co se děje. Máme třídy CSS, které budeme používat:
.error {barva pozadí: červená; }. varování {barva pozadí: žlutá; } Nyní vygenerujeme soubor HTML, použijeme ve směrnici třída ng některé vlastnosti chyba: isError Y varování: isWarningTato hodnocení nám umožňují vybrat si jednu nebo druhou třídu, kterou jsme definovali v CSS.
Pak máme a {{zpráva}} který zobrazí odpovídající hodnotu, kterou umístíme do ovladače:
{{zpráva}}Simulovat chybu Simulovat varováníNakonec provedeme práci v Javascriptu:
funkce ClasesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Toto je chyba!'; $ scope.isError = true; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Jen varování.'; $ scope.isWarning = true; $ scope.isError = false; }; } Díky tomu pak v našem prohlížeči dosáhneme výsledku jako následující:
ZVĚTŠIT
