AngularJS Events: ng-click, ng-show, ng-hide (przykład)

Spisie treści:

Anonim

Podczas tworzenia aplikacji internetowych prędzej czy później aplikacja będzie musiała obsługiwać zdarzenia DOM, takie jak kliknięcia myszą, ruchy, naciśnięcia klawiszy, zmiany zdarzeń itp.

AngularJS może dodać funkcjonalność, która może być wykorzystana do obsługi takich zdarzeń.

Na przykład, jeśli na stronie znajduje się przycisk i chcesz coś przetworzyć po kliknięciu przycisku, możemy użyć dyrektywy zdarzenia ng-click.

Podczas tego kursu szczegółowo przyjrzymy się dyrektywom Event.

W tym samouczku nauczysz się:

  • Co to jest dyrektywa ng-click?
  • Co to jest dyrektywa ng-show?
  • Co to jest dyrektywa ng-hide?

Co to jest dyrektywa ng-click?

Dyrektywa „ng-click” służy do zastosowania niestandardowego zachowania do kliknięcia elementu w HTML. Jest to zwykle używane w przypadku przycisków, ponieważ jest to najczęstsze miejsce do dodawania zdarzeń, które odpowiadają na kliknięcia wykonywane przez użytkownika

Spójrzmy na prosty przykład, jak możemy zaimplementować zdarzenie click.

W tym przykładzie będziemy mieć zmienną licznika, której wartość będzie rosła, gdy użytkownik kliknie przycisk.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Objaśnienie kodu:

  1. Najpierw używamy dyrektywy ng-init, aby ustawić wartość liczby zmiennej lokalnej na 0.
  2. Następnie wprowadzamy dyrektywę zdarzenia ng-click do przycisku. W tej dyrektywie piszemy kod zwiększający wartość zmiennej count o 1.
  3. Tutaj wyświetlamy użytkownikowi wartość zmiennej count.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Z powyższego wyniku,

  • Widzimy, że wyświetlany jest przycisk „Przyrost”, a wartość zmiennej licznika początkowo wynosi zero.
  • Po kliknięciu przycisku Przyrost wartość zliczenia jest odpowiednio zwiększana, jak pokazano na poniższym obrazie wyjściowym.

Co to jest dyrektywa ng-show?

Dyrektywa ng-Show służy do pokazania lub ukrycia danego elementu HTML na podstawie wyrażenia podanego w atrybucie ngShow. W tle element jest pokazywany lub ukrywany poprzez usunięcie lub dodanie klasy CSS .ng-hide do elementu.

W tle element jest pokazywany lub ukrywany poprzez usunięcie lub dodanie klasy CSS .ng-hide do elementu.

Spójrzmy na przykład, jak możemy użyć dyrektywy „ngshow event”, aby wyświetlić ukryty element.

Event Registration

Guru99 Global Event




Angular

Objaśnienie kodu:

  1. Dołączamy dyrektywę zdarzenia ng-click do elementu przycisku. Tutaj odwołujemy się do funkcji o nazwie „ShowHide”, która jest zdefiniowana w naszym kontrolerze - DemoController.
  2. Dołączamy atrybut ng-show do znacznika DIV, który zawiera tekst Angular. To jest tag, który zamierzamy pokazać / ukryć na podstawie atrybutu ng-show.

  3. W kontrolerze dołączamy zmienną składową „IsVisible” do obiektu zasięgu. Ten atrybut zostanie przekazany do atrybutu kątowego ng-show (krok 2) w celu kontrolowania widoczności kontrolki DIV. Początkowo ustawiamy to na fałsz, aby przy pierwszym wyświetleniu strony znacznik DIV był ukryty.

    Uwaga: - Gdy atrybut ng-show jest ustawiony na true, późniejszy element sterujący, który w naszym przypadku jest znacznikiem DIV, zostanie pokazany użytkownikowi. Gdy atrybut ng-show ma wartość false, kontrola będzie ukryta przed użytkownikiem.

  4. Dodajemy kod do funkcji ShowHide, która ustawi zmienną składową IsVisible na wartość true, aby znacznik DIV mógł zostać wyświetlony użytkownikowi.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wyjście: 1

Z wyjścia,

  • Początkowo można zauważyć, że znacznik DIV, który zawiera tekst „AngularJS”, nie jest wyświetlany, a dzieje się tak, ponieważ obiekt zasięgu isVisible jest początkowo ustawiony na wartość false, który jest następnie przekazywany do dyrektywy ng-show znacznika DIV.
  • Kliknięcie przycisku „Pokaż AngularJS” zmienia zmienną składową isVisible na wartość true, a zatem tekst „Angular” staje się widoczny dla użytkownika. Poniższe dane wyjściowe zostaną wyświetlone użytkownikowi.

Dane wyjściowe pokazują teraz znacznik DIV z tekstem kątowym.

Co to jest dyrektywa ng-hide?

Z dyrektywą ng-hide element zostanie ukryty, jeśli wyrażenie ma wartość TRUE. Jeśli wyrażenie ma wartość FALSE, element zostanie wyświetlony. W tle element jest pokazywany lub ukrywany poprzez usunięcie lub dodanie klasy CSS .ng-hide do elementu.

Z drugiej strony w przypadku ng-hide element jest ukryty, jeśli wyrażenie jest prawdziwe i zostanie pokazane, jeśli jest fałszywe.

Spójrzmy na podobny przykład, jak ten pokazany dla ngShow, aby pokazać, jak można użyć atrybutu ngHide.

Event Registration

Guru99 Global Event




Angular

Objaśnienie kodu:

  1. Dołączamy dyrektywę zdarzenia ng-click do elementu przycisku. Tutaj odwołujemy się do funkcji o nazwie ShowHide, która jest zdefiniowana w naszym kontrolerze - DemoController.
  2. Dołączamy atrybut ng-hide do znacznika DIV, który zawiera tekst Angular. To jest tag, który zamierzamy pokazać / ukryć na podstawie atrybutu ng-show.
  3. W kontrolerze dołączamy zmienną składową isVisible do obiektu zasięgu. Ten atrybut zostanie przekazany do atrybutu angular ng-show w celu kontrolowania widoczności kontrolki div. Początkowo ustawiamy to na fałsz, aby przy pierwszym wyświetleniu strony znacznik DIV był ukryty.
  4. Dodajemy kod do funkcji ShowHide, która ustawi zmienną składową IsVisible na wartość true, aby znacznik DIV mógł zostać wyświetlony użytkownikowi.

Jeśli kod zostanie wykonany pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

Z wyjścia,

  • Na początku widać, że znacznik DIV, który ma tekst „AngularJs”, jest początkowo wyświetlany, ponieważ wartość właściwości false jest wysyłana do dyrektywy ng-hide.
  • Kiedy klikniemy na przycisk „Hide Angular”, wartość właściwości true zostanie wysłana do dyrektywy ng-hide. W związku z tym zostanie pokazane poniższe wyjście, w którym słowo „Kątowy” zostanie ukryte.

Dyrektywy nasłuchiwania zdarzeń AngularJS

Możesz dodać detektory zdarzeń AngularJS do elementów HTML, używając co najmniej jednej z następujących dyrektyw:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste

Podsumowanie

  • Dyrektywy zdarzeń są używane w Angular do dodawania niestandardowego kodu reagującego na zdarzenia generowane przez interwencję użytkownika, takie jak kliknięcia przycisków, kliknięcia klawiatury i myszy itp.
  • Najpopularniejszą dyrektywą zdarzeń jest dyrektywa ng-click, która jest używana do obsługi zdarzeń kliknięcia. Najczęstszym zastosowaniem tego jest kliknięcie przycisku, w którym można dodać kod, aby odpowiedzieć na kliknięcie przycisku.
  • Elementy HTML można również odpowiednio ukryć lub pokazać użytkownikowi za pomocą atrybutów kątowych ng-show i ng-hide.