Parādiet un paslēpiet funkcionalitāti, izmantojot AngularJS

AngularJS ļauj integrēt dažādās izmaiņas lietotāja saskarnē ar modeļa izmaiņām, ar to mēs varam pielāgot tādus elementus kā izvēlnes, saraksti, saites utt.., tādā veidā mēs iegūstam interaktīvāku un dinamiskāku pieredzi.
Viens no visbiežāk izmantotajiem efektiem ir parādīšana un slēpšana, jo vienkāršā veidā mēs izvēlnē piedāvājam opcijas parādīties vai nē atbilstoši lietotāja vai modeļa darbībām, AngularJS ļauj mums to vienkāršā veidā iekļaut direktīvās ng-shgow Y ng-slēpt.
Ja mūsu lietojumprogramma ir sarežģīta, mums noteikti būs elementi, kas ir jutīgi pret kontekstu, tas ir, mēs varam izmantot rīku, ja ir izpildīti pareizie nosacījumi, vai, iespējams, vajadzētu slēpt dažas izvēlnes opcijas, ja ir izpildīti daži nosacījumi.
ng-rādīt un ng-slēptTas pateicoties AngularJS To ir ļoti viegli sasniegt, tāpēc mēs izmantosim direktīvas ng-šovs Y ng-slēpt, kuriem, piemēram, ir reversa darbība ng-šovs parādīs elementu, kamēr tā stāvoklis ir patiess, ja tas ir nepatiess, tas to paslēps un ng-slēpt tas slēps elementu, kamēr tā stāvoklis ir patiess, pretējā gadījumā tas to parādīs.
Tātad, veicot šīs darbības, mūsu loģika ir tā, kas noteiks, kuru izmantosim savās lietojumprogrammās, šīs direktīvas darbojas, strādājot ar to elementu stiliem, kur tās tiek piemērotas, tādēļ, ja mēs strādājam ar īpašībām displejs: bloks lai parādītu un displejs: nav slēpt, jo mēs neredzam neko tādu, ko nezinām vai kas ir pārāk sarežģīti, lai to nemācītos.
Šajā piemērā mēs strādāsim, parādot izvēlni vai nē, ja noklikšķināsim uz opcijas, kas to kontrolē, lai to izdarītu, mums jādara šādi:
1- failā HTML mēs iekļausim AngularJS un tad mēs ģenerēsim kontrolieri, kas mums palīdzēs mūsu uzdevumā, kontroliera kodam ir jākontrolē izvēlnes darbības, un tam vajadzētu būt funkcijai vai metodei, kas veic izmaiņas, strādājot ar direktīvas noteikumiem, šajā gadījumā mēs strādā ar ng-šovs, redzēsim nepieciešamo kodu:

 funkcija ShowHideController ($ skala) {$ ulatums.menuState = {} $ darbības joma.menuState.show = nepatiesa; $ ulatums.cambiarMenu = funkcija () {$ darbības joma.menuState.show =! $ darbības joma.menuState.show; }; } 

2- Tad mums ir jāsagatavo HTML elementi, lai mēs varētu piemērot direktīvu AngularJS, šim nolūkam mēs definējam $ darbības joma un beidzot piemērojam direktīvu ng-šovs sarakstā, apskatīsim:

Mainīt izvēlni 
 
darbība1
darbība2
darbība3

Tādējādi mūsu izvēlne ir jāparāda vai jāslēpj, noklikšķinot uz atbilstošās pogas, redzēsim, kā tā izskatās mūsu pārlūkprogrammā abos štatos. Šeit mēs varam redzēt sākotnējo stāvokli bez izvēlnes vienumiem:

Pēc tam, noklikšķinot uz pogas, mēs varam redzēt, kā parādās izvēlne, zemāk ir kods, ko mūsu konsole nosaka Javascript lai demonstrētu tā darbību AngularJS:

Mēs pamanījām, ka konsoles kodā klase pazuda ng-slēpt tādējādi ļaujot pareizi redzēt izvēlni.
Ar to mēs pabeidzam šo apmācību, kurā mēs esam iemācījušies izmantot parādīšanas un slēpšanas rekvizītus, veidojot lietojumprogrammu AngularJS.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu