✅ Klasy i style w AngularJS

Spisie treści

Sposób, w jaki możemy pracować z naszymi aplikacjami i ich interfejs użytkownika może sugerować zmiany w stylach, zmiany te znajdują odzwierciedlenie w większości w najnowocześniejszych aplikacjach ze zmianami w Lekcje CSS elementów, dzięki temu możemy rozmieścić kolory, zmienić aranżację itp. naszych elementów HTML.
AngularJS pozwala nam na wprowadzanie tych zmian dynamicznie, gdy zmienia się model, dzięki czemu możemy powiązać wygląd aplikacji jako całość z jej działaniem, do tego mamy dwa sposoby, jeden za pomocą interpolacji, a drugi z dyrektywą klasa ng.
W tym przypadku wyobraźmy sobie, że mamy Klasa CSS, jeśli chcemy zastosować go do naszego elementu w określonym momencie lub akcji, możemy użyć notacji interpolacyjnej kątowy {{}} dzięki czemu możesz zastosować zmianę za pomocą funkcji działającej na $ zakres kontroler.
Na przykład mamy klasę, która pokazuje element w kolorze szarym, aby pokazać, że nie jest on aktywny:

 .menu-disabled-true {kolor: szary; }

Jeśli chcemy zastosować go do naszej aplikacji, wiemy, że możemy sprawić, by nasz element przybrał stan jego dyrektyw, tak jak obserwujemy:


Dezaktywować

Teraz tworzymy zawartość naszego JavaScript, tutaj zmienimy właściwość jest niepełnosprawny za każdym razem, gdy klikniemy na nasz element:

 function MenuController ($zakres) {$zakres.isDisabled = false; $ zakres. wyłączyć = funkcja () {$ scope.isDisabled = 'prawda'; }; }

Teraz widzimy, jak to wygląda po uruchomieniu aplikacji:

A teraz po kliknięciu dezaktywuj:

Mogliśmy zaobserwować, jak nastąpiła zmiana Klasa CSS w prosty sposób i żeby kontroler załatwił wszystko.
Innym sposobem na zastosowanie zmian w stylu jest dyrektywa klasa ng, pozwala nam to na nieco większą elastyczność, ponieważ możemy wykorzystać sposób, w jaki to działa AngularJS w ten sposób możemy ocenić warunki iw zależności od ich spełnienia możemy pokazać jedną lub inną klasę.
Zobaczmy w poniższym przykładzie, że chcemy mieć klasę ostrzeżenia i klasę błędu, dzięki czemu możemy nawet wyświetlać różne komunikaty, aby użytkownik był świadomy tego, co się dzieje. Mamy klasy CSS, z których będziemy korzystać:

 .error {kolor tła: czerwony; } .ostrzeżenie {kolor tła: żółty; }

Teraz wygenerujemy HTML, użyjemy w dyrektywie klasa ng niektóre właściwości błąd: isError Tak ostrzeżenie: jest ostrzeżenieTe oceny to te, które pozwalają nam wybrać jedną lub inną klasę z tych, które zdefiniowaliśmy w CSS.
Następnie mamy {{wiadomość}} która pokaże odpowiednią wartość, którą umieścimy w kontrolerze:

{{wiadomość}}Symuluj błąd Symuluj ostrzeżenie

Wreszcie wykonujemy pracę w Javascript:

 function ClassesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'To jest błąd!'; $ zakres.isError = prawda; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Tylko ostrzeżenie.'; $ zakres.isWarning = prawda; $ scope.isError = false; }; }

Dzięki temu uzyskamy w naszej przeglądarce wynik podobny do następującego:

POWIĘKSZAĆ

Patrzymy na konsolę w obrazie, który czyni nas a ng-wiązanie z klasą ostrzeżeń, którą zdefiniowaliśmy dla ostrzeżeń, jeśli klikniemy Symuluj błąd następnie zrób to samo z klasą błędu. Na tym kończymy ten samouczek, nauczyliśmy się już łączyć style i klasy CSS z naszymi aplikacjami wykonanymi w AngularJS.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt