AngularJS notikumi: ng-click, ng-show, ng-hide (Piemērs)

Satura rādītājs:

Anonim

Veidojot tīmekļa lietojumprogrammas, agrāk vai vēlāk jūsu lietojumprogrammai būs jāapstrādā DOM notikumi, piemēram, peles klikšķi, pārvietošanās, tastatūras nospiešana, notikumu maiņa utt.

AngularJS var pievienot funkcionalitāti, ko var izmantot, lai apstrādātu šādus notikumus.

Piemēram, ja lapā ir poga un vēlaties kaut ko apstrādāt, noklikšķinot uz pogas, mēs varam izmantot notikumu direktīvu ng-click.

Šajā kursā mēs detalizēti izpētīsim Pasākumu direktīvas.

Šajā apmācībā jūs uzzināsiet

  • Kas ir ng-click direktīva?
  • Kas ir ng-show direktīva?
  • Kas ir ng-hide direktīva?

Kas ir ng-click direktīva?

"Ng klikšķi direktīva", tiek izmantots, lai piemērotu pasūtījuma uzvedību, kad elements HTML uzklikšķināt. To parasti izmanto pogām, jo ​​tā ir visizplatītākā notikumu pievienošanas vieta, kas reaģē uz lietotāja veiktajiem klikšķiem

Apskatīsim vienkāršu piemēru tam, kā mēs varam ieviest klikšķu notikumu.

Šajā piemērā mums būs skaitītāja mainīgais, kura vērtība pieaugs, kad lietotājs noklikšķinās uz pogas.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Koda skaidrojums:

  1. Mēs vispirms izmantojam direktīvu ng-init, lai vietējā mainīgā skaita vērtību iestatītu uz 0.
  2. Pēc tam mēs pogai ieviešam ng-click notikumu direktīvu. Šajā direktīvā mēs rakstām kodu, lai skaitļa mainīgā vērtību palielinātu par 1.
  3. Šeit mēs parādām skaitītāja mainīgā vērtību lietotājam.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

No iepriekš minētās izejas

  • Mēs varam redzēt, ka tiek parādīta poga "Pieaugums", un skaitītāja mainīgā vērtība sākotnēji ir nulle.
  • Noklikšķinot uz pogas Pieaugšana, skaitļa vērtība tiek attiecīgi palielināta, kā parādīts izejas attēlā zemāk.

Kas ir ng-show direktīva?

ng-Show direktīva tiek izmantota, lai parādītu vai paslēptu noteiktu HTML elementu, pamatojoties uz izteiksmi, kas sniegta atribūtam ngShow. Fonā elements tiek parādīts vai paslēpts, elementam noņemot vai pievienojot .ng-hide CSS klasi.

Fonā elements tiek parādīts vai paslēpts, elementam noņemot vai pievienojot .ng-hide CSS klasi.

Apskatīsim piemēru, kā mēs varam izmantot direktīvu "ngshow event", lai parādītu slēpto elementu.

Event Registration

Guru99 Global Event




Angular

Koda skaidrojums:

  1. Mēs pievienojam pg elementam ng-click notikuma direktīvu. Šeit mēs atsaucamies uz funkciju ar nosaukumu "ShowHide", kas ir definēta mūsu kontrolierī - DemoController.
  2. Mēs pievienojam atribūtu ng-show div tagam, kurā ir teksts Angular. Tas ir tags, kuru mēs parādīsim / paslēpsim, pamatojoties uz atribūtu ng-show.

  3. Kontrolierī mēs pievienojam dalībnieka mainīgo "IsVisible" darbības jomas objektam. Šis atribūts tiks nodots ng-show leņķa atribūtam (2. darbība), lai kontrolētu div vadības redzamību. Sākotnēji mēs to iestatām uz false, lai, pirmo reizi parādot lapu, div tags tiktu paslēpts.

    Piezīme: - Kad atribūti ng-show ir iestatīti uz true, lietotājam tiks parādīta turpmākā vadīkla, kas mūsu gadījumā ir tag. Kad atribūts ng-show ir iestatīts uz false, vadīkla tiks paslēpta no lietotāja.

  4. Mēs pievienojam kodu ShowHide funkcijai, kas IsVisible dalībnieka mainīgo iestatīs uz true, lai div tagu varētu parādīt lietotājam.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja: 1

No izejas

  • Sākotnēji jūs varat redzēt, ka div tags, kura teksts ir “AngularJS”, netiek parādīts, un tas ir tāpēc, ka isVisible darbības objekts sākotnēji tiek iestatīts uz false, kas pēc tam tiek nodots div tag ng-show direktīvai.
  • Noklikšķinot uz pogas "Rādīt leņķiskoJS", tas maina locekļa mainīgo isVisible, lai tas kļūtu patiess, un tādējādi teksts "Leņķa" kļūst redzams lietotājam. Zemāk redzamā izeja tiks parādīta lietotājam.

Tagad izvadē tiek parādīts div tags ar leņķa tekstu.

Kas ir ng-hide direktīva?

Ar ng-hide direktīvu elements tiks paslēpts, ja izteiksme ir PATIESA. Ja izteiksme ir FALSE, tiks parādīts elements. Fonā elements tiek parādīts vai paslēpts, elementam noņemot vai pievienojot .ng-hide CSS klasi.

No otras puses, izmantojot ng-hide, elements tiek paslēpts, ja izteiksme ir patiesa, un tas tiks parādīts, ja tas ir nepareizs.

Apskatīsim līdzīgu piemēru, kāds parādīts ngShow, lai parādītu, kā var izmantot atribūtu ngHide.

Event Registration

Guru99 Global Event




Angular

Koda skaidrojums:

  1. Mēs pievienojam pg elementam ng-click notikuma direktīvu. Šeit mēs atsaucamies uz funkciju ShowHide, kas ir definēta mūsu kontrolierī - DemoController.
  2. Mēs pievienojam atribūtu ng-hide div tagam, kurā ir teksts Angular. Tas ir tags, kuru mēs parādīsim / slēpsim, pamatojoties uz atribūtu ng-show.
  3. Kontrolierī mēs pievienojam mainīgo isVisible locekļa darbības objektam. Šis atribūts tiks nodots ng-show leņķa atribūtam, lai kontrolētu div vadības redzamību. Sākotnēji mēs to iestatām uz false, lai, pirmo reizi parādot lapu, div tags tiktu paslēpts.
  4. Mēs pievienojam kodu ShowHide funkcijai, kas IsVisible dalībnieka mainīgo iestatīs uz true, lai div tagu varētu parādīt lietotājam.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

No izejas

  • Sākotnēji jūs varat redzēt, ka sākotnēji tiek parādīts div tags, kuram ir teksts "AngularJs", jo īpašuma vērtība false tiek nosūtīta direktīvai ng-hide.
  • Kad mēs noklikšķināsim uz pogas "Slēpt leņķi", īpašuma vērtības vērtība tiks nosūtīta direktīvai ng-hide. Tādējādi tiks parādīta zemāk redzamā izvade, kurā tiks paslēpts vārds "Leņķa".

AngularJS notikumu klausītāju direktīvas

Jūs varat pievienot AngularJS notikumu klausītājus HTML elementiem, izmantojot vienu vai vairākas no šīm direktīvām:

  • ng-aizmiglot
  • ng-izmaiņas
  • ng noklikšķiniet
  • ng-copy
  • ng-sagriezts
  • ng-dblclick
  • ng fokuss
  • ng-keydown
  • ng-taustiņu nospiešana
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

Kopsavilkums

  • Notikumu direktīvas tiek izmantotas leņķiski, lai pievienotu pielāgotu kodu, lai reaģētu uz lietotāja iejaukšanās radītiem notikumiem, piemēram, uz pogas, tastatūras un peles klikšķiem utt.
  • Visizplatītākā notikumu direktīva ir ng-click direktīva, kas tiek izmantota klikšķu notikumu apstrādei. Visbiežāk tas tiek izmantots klikšķiem uz pogas, kur kodu var pievienot, lai reaģētu uz pogas klikšķi.
  • HTML elementus var arī paslēpt vai attiecīgi parādīt lietotājam, izmantojot leņķa atribūtus ng-show un ng-hide.