Прикажи и сакриј функционалност помоћу АнгуларЈС -а

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

 функција СховХидеЦонтроллер ($ сцопе) {$ сцопе.менуСтате = {} $ сцопе.менуСтате.схов = фалсе; $ сцопе.цамбиарМену = фунцтион () {$ сцопе.менуСтате.схов =! $ сцопе.менуСтате.схов; }; } 

2- Затим морамо припремити наше ХТМЛ елементе да бисмо могли примијенити директиву АнгуларЈС, за ово дефинишемо $ опсег контролера и на крају примењујемо директиву нг-схов на листу, да видимо:

Промени мени 
 
акција1
акција2
акција3

Овим би наш мени требало да се прикаже или сакрије док кликнемо на одговарајуће дугме, да видимо како то изгледа у нашем прегледачу у оба стања. Овде можемо видети почетно стање без ставки менија:

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

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