Преглед садржаја
Начин на који можемо да радимо са нашим апликацијама и корисничким интерфејсом могу подразумевати промене у стиловима, те промене се углавном одражавају у најсавременијим апликацијама са променама у лекције ЦСС елемената, помоћу овога можемо да поставимо боје, променимо распоред итд., наше елементе ХТМЛ.АнгуларЈС омогућава нам да динамички уносимо ове промене када се модел промени, тако да можемо повезати како апликација изгледа у целини са својим радом, за то имамо два начина, један користећи интерполацију, а други са директивом нг-цласс.
У овом случају, замислимо да имамо а ЦСС класа, ако га желимо примијенити на наш елемент у одређеном тренутку или радњи, можемо користити интерполацијски запис од Угаона {{}} тако да можете применити промену помоћу функције која се извршава на $ опсег контролер.
На пример, имамо класу која приказује елемент у сивој боји како би показала да није активан:
.мену-дисаблед-труе {боја: сива; } Ако желимо да га применимо на нашу апликацију, знамо да можемо учинити да наш елемент узме стање његових директива док посматрамо:
- Деактивирајте
Сада правимо садржај нашег Јавасцрипт, овде ћемо променити имовину је онемогућен сваки пут када кликнемо на наш елемент:
функција МенуЦонтроллер ($ опсег) {$ сцопе.исДисаблед = фалсе; $ опсег. дисабле = фунцтион () {$ сцопе.исДисаблед = 'труе'; }; } Сада видимо како то изгледа при покретању апликације:
Други начин примене промена стила је директива нг-цласс, ово нам омогућава мало више флексибилности јер можемо искористити начин на који ради АнгуларЈС тако можемо успети да проценимо услове и у зависности од њиховог испуњења можемо показати једну или другу класу.
Погледајмо у следећем примеру да желимо да имамо класу упозорења и класу грешке, са овим чак можемо приказати различите поруке како би корисник могао бити свестан шта се дешава. Имамо ЦСС класе које ћемо користити:
.грешка {бацкгроунд-цолор: ред; } .варнинг {бацкгроунд-цолор: иеллов; } Сада ћемо генерисати ХТМЛ, користићемо у директиви нг-цласс нека својства грешка: исЕррор И упозорење: исУпозорењеОве оцене нам омогућавају да изаберемо једну или другу класу од оних које смо дефинисали у ЦСС -у.
Тада имамо а {{порука}} која ће показати одговарајућу вредност коју ћемо поставити у контролер:
{{порука}}Симулате Еррор Симулате ВарнингНа крају радимо посао у Јавасцрипт -у:
функција ЦласесЦонтроллер ($ опсег) {$ сцопе.исЕррор = фалсе; $ сцопе.исВарнинг = фалсе; $ сцопе.сховЕррор = фунцтион () {$ сцопе.мессаге = 'Ово је грешка!'; $ сцопе.исЕррор = тачно; $ сцопе.исВарнинг = фалсе; }; $ сцопе.мострарВарнинг = фунцтион () {$ сцопе. мессаге = 'Само упозорење.'; $ сцопе.исВарнинг = труе; $ сцопе.исЕррор = нетачно; }; } Овим ћемо у нашем прегледачу постићи резултат попут следећег:
ЕНЛАРГЕ
