Класе и стилови у АнгуларЈС -у

Начин на који можемо да радимо са нашим апликацијама и корисничким интерфејсом могу подразумевати промене у стиловима, те промене се углавном одражавају у најсавременијим апликацијама са променама у лекције ЦСС елемената, помоћу овога можемо да поставимо боје, променимо распоред итд., наше елементе ХТМЛ.
АнгуларЈС омогућава нам да динамички уносимо ове промене када се модел промени, тако да можемо повезати како апликација изгледа у целини са својим радом, за то имамо два начина, један користећи интерполацију, а други са директивом нг-цласс.
У овом случају, замислимо да имамо а ЦСС класа, ако га желимо примијенити на наш елемент у одређеном тренутку или радњи, можемо користити интерполацијски запис од Угаона {{}} тако да можете применити промену помоћу функције која се извршава на $ опсег контролер.
На пример, имамо класу која приказује елемент у сивој боји како би показала да није активан:

 .мену-дисаблед-труе {боја: сива; } 

Ако желимо да га применимо на нашу апликацију, знамо да можемо учинити да наш елемент узме стање његових директива док посматрамо:

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

Сада правимо садржај нашег Јавасцрипт, овде ћемо променити имовину је онемогућен сваки пут када кликнемо на наш елемент:

 функција МенуЦонтроллер ($ опсег) {$ сцопе.исДисаблед = фалсе; $ опсег. дисабле = фунцтион () {$ сцопе.исДисаблед = 'труе'; }; } 

Сада видимо како то изгледа при покретању апликације:

А сада када кликнете на деактивирај:

Могли смо да посматрамо како је дошло до промене ЦСС класа на једноставан начин и да је контролор управљао свиме.
Други начин примене промена стила је директива нг-цласс, ово нам омогућава мало више флексибилности јер можемо искористити начин на који ради АнгуларЈС тако можемо успети да проценимо услове и у зависности од њиховог испуњења можемо показати једну или другу класу.
Погледајмо у следећем примеру да желимо да имамо класу упозорења и класу грешке, са овим чак можемо приказати различите поруке како би корисник могао бити свестан шта се дешава. Имамо ЦСС класе које ћемо користити:

 .грешка {бацкгроунд-цолор: ред; } .варнинг {бацкгроунд-цолор: иеллов; } 

Сада ћемо генерисати ХТМЛ, користићемо у директиви нг-цласс нека својства грешка: исЕррор И упозорење: исУпозорењеОве оцене нам омогућавају да изаберемо једну или другу класу од оних које смо дефинисали у ЦСС -у.
Тада имамо а {{порука}} која ће показати одговарајућу вредност коју ћемо поставити у контролер:

{{порука}}Симулате Еррор Симулате Варнинг

На крају радимо посао у Јавасцрипт -у:

 функција ЦласесЦонтроллер ($ опсег) {$ сцопе.исЕррор = фалсе; $ сцопе.исВарнинг = фалсе; $ сцопе.сховЕррор = фунцтион () {$ сцопе.мессаге = 'Ово је грешка!'; $ сцопе.исЕррор = тачно; $ сцопе.исВарнинг = фалсе; }; $ сцопе.мострарВарнинг = фунцтион () {$ сцопе. мессаге = 'Само упозорење.'; $ сцопе.исВарнинг = труе; $ сцопе.исЕррор = нетачно; }; } 

Овим ћемо у нашем прегледачу постићи резултат попут следећег:

ЕНЛАРГЕ

Гледамо конзолу на слици која нас чини а нг-везујући са класом упозорења коју смо дефинисали за упозорења, ако кликнемо на Грешка при симулацији онда урадите исто са класом грешке. Овим смо завршили овај водич, већ смо научили да повезујемо ЦСС стилове и класе са нашим апликацијама направљеним у АнгуларЈС.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен