Rodyti ir slėpti funkcionalumą naudojant „AngularJS“

KampinisJS leidžia integruoti įvairius vartotojo sąsajos pakeitimus su modelio pakeitimais, todėl galime koreguoti tokius elementus kaip meniu, sąrašai, nuorodos ir kt.., tokiu būdu mes pasiekiame interaktyvesnę ir dinamiškesnę patirtį.
Vienas iš dažniausiai naudojamų efektų yra rodymas ir slėpimas, nes paprastu būdu mes pasirenkame meniu parinktis, kad jos atsirastų arba ne pagal vartotojo ar modelio veiksmus, KampinisJS leidžia mums paprastai ją įtraukti į direktyvas ng-shgow Y ng-slėpti.
Jei mūsų programa yra sudėtinga, mes tikrai turėsime elementų, kurie yra jautrūs kontekstui, tai yra, galime naudoti įrankį, jei įvykdomos tinkamos sąlygos, arba galbūt turėtume paslėpti kai kurias meniu parinktis, kai įvykdomos tam tikros sąlygos.
rodyti ir slėptiTai dėka KampinisJS Tai labai lengva pasiekti, todėl mes naudosime direktyvas ng-šou Y ng-slėpti, kurių kiekviena, pavyzdžiui, turi atvirkštinę operaciją ng-šou rodys elementą tol, kol jo būklė yra teisinga, jei jis klaidingas, jis jį paslėps ir ng-slėpti jis paslėps elementą tol, kol jo būklė yra teisinga, kitaip jis jį parodys.
Taigi atliekant šias operacijas mūsų logika yra ta, kuri nurodys, kurią iš jų naudosime savo programose, šios direktyvos veikia dirbant su elementų, kuriuose jie taikomi, stiliais, taigi, jei dirbame su savybėmis ekranas: blokas parodyti ir ekranas: nėra paslėpti, nes nematome nieko, ko nežinome arba yra pernelyg sudėtinga, kad nesimokytume.
Šiame pavyzdyje mes ketiname dirbti rodydami meniu arba ne, jei spustelėsime jį valdančią parinktį, todėl turime atlikti šiuos veiksmus:
1- faile HTML mes ketiname įtraukti KampinisJS ir tada mes sukursime valdiklį, kuris mums padės atlikti užduotį, valdiklio kodas turi valdyti meniu veiksmus ir turėtų funkciją ar metodą, kuris pakeistų dirbant su direktyvos nuostatomis, šiuo atveju mes dirbti su ng-šou, pažiūrėkime reikiamą kodą:

 funkcija ShowHideController ($ apimtis) {$ ulatis.menuState = {} $ apimtis.menuState.show = false; $ ulatis.cambiarMenu = funkcija () {$ apimtis.menuState.show =! $ ulatis.menuState.show; }; } 

2- Tada mes turime paruošti savo HTML elementus, kad galėtume taikyti direktyvą KampinisJS, tam mes apibrėžiame $ apimtis duomenų valdytojo ir galiausiai taikome direktyvą ng-šou į sąrašą, pažiūrėkime:

Keisti meniu 
 
veiksmas1
veiksmas2
veiksmas3

Tokiu būdu mūsų meniu turėtų būti rodomas arba paslėptas spustelėjus atitinkamą mygtuką, pažiūrėkime, kaip jis atrodo mūsų naršyklėje abiejose būsenose. Čia matome pradinę būseną be meniu elementų:

Tada spustelėję mygtuką pamatysime, kaip atrodo meniu, žemiau yra kodas, kurį aptinka mūsų konsolė Javascript parodyti jo veikimą KampinisJS:

Pastebėjome, kad konsolės kode klasė dingo ng-slėpti taip galite teisingai matyti meniu.
Tuo baigiame šį vadovėlį, kuriame išmokome naudoti rodymo ir slėpimo ypatybes kurdami programą KampinisJS.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką