Класове и стилове в AngularJS

Начинът, по който можем да работим с нашите приложения и неговия потребителски интерфейс може да предполага промени в стиловете, тези промени се отразяват най -вече в най -модерните приложения с промени в Уроци CSS на елементите, с това можем да успеем да поставим цветове, да променим подредбата и т.н., нашите елементи HTML.
AngularJS ни позволява да правим тези промени динамично при промяна на модела, така че можем да свържем как изглежда приложението като цяло с работата му, за това имаме два начина, единият използва интерполация, а вторият с директивата ng-клас.
В този случай, нека си представим, че имаме a CSS клас, ако искаме да го приложим към нашия елемент в определен момент или действие, можем да използваме интерполационната нотация на Ъглова {{}} за да можете да приложите промяната с функция, която работи на $ обхват контролер.
Например имаме клас, който показва елемент в сиво, за да покаже, че той не е активен:

 .menu-disabled-true {цвят: сив; } 

Ако искаме да го приложим към нашето приложение, знаем, че можем да накараме нашия елемент да приеме състоянието на неговите директиви, докато наблюдаваме:

Деактивирайте

Сега ние правим съдържанието на нашето Javascript, тук ще променим имота е деактивиран всеки път, когато кликнете върху нашия елемент:

 функция MenuController ($ scope) {$ scope.isDisabled = false; $ обхват. disable = function () {$ scope.isDisabled = 'true'; }; } 

Сега виждаме как изглежда при стартиране на приложението:

И сега, когато щракнете върху деактивиране:

Успяхме да наблюдаваме как е имало промяната на CSS клас по прост начин и че контролерът обработва всичко.
Друг начин за прилагане на промени в стила е с директивата ng-клас, това ни позволява малко повече гъвкавост, тъй като можем да се възползваме от начина, по който работи AngularJS по този начин можем да оценим условията и в зависимост от тяхното изпълнение можем да покажем един или друг клас.
Нека да видим в следния пример, че искаме да имаме клас на предупреждение и клас на грешка, с това дори можем да показваме различни съобщения, така че потребителят да е наясно какво се случва. Имаме CSS класове, които ще използваме:

 .eror {background-color: red; }. предупреждение {background-color: yellow; } 

Сега ще генерираме HTML, ще използваме в директивата ng-клас някои имоти грешка: isError Y предупреждение: isWarningТези оценки са тези, които ни позволяват да изберем един или друг клас от тези, които сме дефинирали в CSS.
Тогава имаме a {{съобщение}} която ще покаже съответната стойност, която ще поставим в контролера:

{{съобщение}}Симулирайте грешка Симулирайте предупреждение

Накрая вършим работата в Javascript:

 функция ClasesController ($ обхват) {$ обхват.isError = false; $ scope.isWarning = невярно; $ scope.showError = function () {$ scope.message = 'Това е грешка!'; $ scope.isError = вярно; $ scope.isWarning = невярно; }; $ scope.mostrarWarning = function () {$ обхват. message = 'Само предупреждение.'; $ scope.isWarning = вярно; $ scope.isError = невярно; }; } 

С това ще постигнем резултат като следния в нашия браузър:

Увеличете

Гледаме конзолата в изображението, което ни прави ng-свързване с класа на предупреждения, който е този, който сме дефинирали за предупрежденията, ако щракнем върху Симулиране на грешка след това направете същото с класа на грешката. С това приключваме този урок, вече се научихме да свързваме CSS стилове и класове с нашите приложения, направени в AngularJS.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка