Съдържание
Начинът, по който можем да работим с нашите приложения и неговия потребителски интерфейс може да предполага промени в стиловете, тези промени се отразяват най -вече в най -модерните приложения с промени в Уроци CSS на елементите, с това можем да успеем да поставим цветове, да променим подредбата и т.н., нашите елементи HTML.AngularJS ни позволява да правим тези промени динамично при промяна на модела, така че можем да свържем как изглежда приложението като цяло с работата му, за това имаме два начина, единият използва интерполация, а вторият с директивата ng-клас.
В този случай, нека си представим, че имаме a CSS клас, ако искаме да го приложим към нашия елемент в определен момент или действие, можем да използваме интерполационната нотация на Ъглова {{}} за да можете да приложите промяната с функция, която работи на $ обхват контролер.
Например имаме клас, който показва елемент в сиво, за да покаже, че той не е активен:
.menu-disabled-true {цвят: сив; } Ако искаме да го приложим към нашето приложение, знаем, че можем да накараме нашия елемент да приеме състоянието на неговите директиви, докато наблюдаваме:
- Деактивирайте
Сега ние правим съдържанието на нашето Javascript, тук ще променим имота е деактивиран всеки път, когато кликнете върху нашия елемент:
функция MenuController ($ scope) {$ scope.isDisabled = false; $ обхват. disable = function () {$ scope.isDisabled = 'true'; }; } Сега виждаме как изглежда при стартиране на приложението:
Друг начин за прилагане на промени в стила е с директивата 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 = невярно; }; } С това ще постигнем резултат като следния в нашия браузър:
Увеличете
