Dyrektywy AngularJS ng-click, ng-show i ng-hide z przykładem
Jamesa Hartmana
Wydarzenia AngularJS
Wydarzenia AngularJS to funkcje umożliwiające aplikacjom internetowym interakcję z danymi wprowadzanymi przez użytkownika, np. kliknięciem myszy, wprowadzaniem danych z klawiatury, najechaniem myszą itp. Zdarzenia muszą być obsługiwane w aplikacjach internetowych, aby mogły wykonywać określone zadania i akcje. Uruchamia się, gdy użytkownik wykona określoną akcję.
Podczas tworzenia aplikacji internetowych prędzej czy później Twoja aplikacja będzie musiała obsługiwać zdarzenia DOM, takie jak kliknięcia myszą, ruchy, naciśnięcia klawiatury, zdarzenia zmian itp.
angularjs może dodać funkcjonalność, której można użyć 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 skorzystać z dyrektywy zdarzenia Angular ng-click.
Podczas tego kursu szczegółowo omówimy dyrektywy dotyczące wydarzeń.
Co to jest dyrektywa ng-click w AngularJS?
Kolekcja „dyrektywa ng-click” w AngularJS służy do stosowania niestandardowego zachowania po kliknięciu elementu w HTML. Ta dyrektywa jest zwykle używana w przypadku przycisków, ponieważ jest to najczęstsze miejsce dodawania zdarzeń reagujących na kliknięcia wykonywane przez użytkownika. Służy także do wyświetlania wyskakujących alertów po kliknięciu przycisku.
Składnia ng-click w AngularJS
<element ng-click="expression"> </element>
Spójrzmy na prosty przykład tego, jak możemy zaimplementować zdarzenie kliknięcia.
Przykład ng-click w AngularJS
W tym przykładzie ng-click będziemy mieli zmienną licznika, której wartość będzie zwiększana, gdy użytkownik kliknie przycisk.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="">
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<div>The Current Count is {{count}}</div>
</body>
</html>
Wyjaśnienie kodu:
- Najpierw używamy dyrektywy ng-init, aby ustawić wartość zmiennej lokalnej count na 0.
- Następnie wprowadzamy do przycisku dyrektywę zdarzenia ng-click. W tej dyrektywie piszemy kod zwiększający wartość zmiennej count o 1.
- Tutaj wyświetlamy użytkownikowi wartość zmiennej licznika.
Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.
Wyjście:
Z powyższego wyniku
- Możemy zobaczyć, że wyświetlany jest przycisk „Inkrementacja”, a wartość zmiennej count początkowo wynosi zero.
- Po kliknięciu przycisku Zwiększ wartość licznika zostanie odpowiednio zwiększona, jak pokazano na obrazie wyjściowym poniżej.
Co to jest dyrektywa ng-show w AngularJS?
Kolekcja dyrektywa ng-Show w AngularJS służy do pokazania lub ukrycia danego szczegółu HTML element na podstawie wyrażenia podanego w atrybucie ng-show. W tle element HTML jest pokazywany lub ukrywany poprzez usunięcie lub dodanie klasy CSS .ng-hide do elementu. Jest to predefiniowana klasa CSS, która ustawia wyświetlanie na none.
Składnia ng-show w AngularJS
<element ng-show="expression"> </element>
W tle element jest pokazywany lub ukrywany poprzez usunięcie lub dodanie klasy CSS .ng-hide do elementu.
Przykład ng-show w AngularJS
Przyjrzyjmy się ng-show w Angular. Przykład tego, jak możemy użyć dyrektywy „ngshow event” do wyświetlenia ukrytego elementu.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<br><br><div ng-show = "IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = true;
}
});
</script>
</body>
</html>
Wyjaśnienie kodu:
- 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.
- Dołączamy atrybut ng-show do znacznika div zawierającego tekst Angular. To jest tag, który będziemy pokazywać/ukrywać na podstawie atrybutu ng-show.
- W kontrolerze dołączamy zmienną członkowską „IsVisible” do obiektu zakresu. Ten atrybut zostanie przekazany do atrybutu ng-show angular (krok nr 2), aby kontrolować widoczność kontrolki div. Początkowo ustawiamy to na false, aby po pierwszym wyświetleniu strony znacznik div był ukryty. Uwaga: - Gdy atrybut ng-show jest ustawiony na true, użytkownikowi zostanie pokazana kolejna kontrolka, którą w naszym przypadku jest znacznik div. Gdy atrybut ng-show jest ustawiony na false, kontrola będzie ukryta przed użytkownikiem.
- Dodajemy kod do funkcji ShowHide, która ustawi zmienną członkowską IsVisible na true, dzięki czemu tag AngularJS show hide div po kliknięciu będzie mógł zostać pokazany użytkownikowi.
Jeśli kod dla ng-show i ng-hide w AngularJS zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.
Wyjście: 1
Z wyjścia,
- Początkowo widać, że znacznik div zawierający tekst „AngularJS” nie jest wyświetlany, a dzieje się tak dlatego, że obiekt zakresu isVisible jest początkowo ustawiony na wartość false, która następnie jest przekazywana do dyrektywy ng-show znacznika div.
- Kliknięcie przycisku „Pokaż AngularJS” powoduje zmianę zmiennej składowej isVisible na prawdziwą i dlatego tekst „Angular” staje się widoczny dla użytkownika. Poniższe dane wyjściowe zostaną pokazane użytkownikowi.
Dane wyjściowe pokazują teraz znacznik div z tekstem Angular.
Co to jest dyrektywa ng-hide w AngularJS?
Kolekcja dyrektywa ng-hide w AngularJS to funkcja, za pomocą której element zostanie ukryty, jeśli wyrażenie ma wartość TRUE. Jeśli wyrażenie ma wartość FAŁSZ, element zostanie pokazany. W tle element jest pokazywany lub ukrywany poprzez usunięcie lub dodanie klasy CSS .ng-hide do elementu.
Składnia ng-hide w AngularJS
<element ng-hide="expression"> </element>
Z drugiej strony w przypadku ng-hide element jest ukryty, jeśli wyrażenie jest prawdziwe i zostanie pokazane, jeśli jest fałszywe.
Przykład ng-hide w AngularJS
Przyjrzyjmy się podobnemu przykładowi ng-hide do tego pokazanego dla ngShow, aby pokazać, w jaki sposób można użyć atrybutów ng-hide i ng-show.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Hide Angular" ng-click="ShowHide()"/>
<br><br><div ng-hide="IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = $scope.IsVisible = true;
}
});
</script>
</body>
</html>
Wyjaśnienie kodu:
- 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.
- Dołączamy atrybut ng-hide do znacznika div, który zawiera tekst Angular. To jest tag, którego użyjemy do pokazania hide w Angularze w oparciu o atrybut ng-show.
- W kontrolerze dołączamy zmienną członkowską isVisible do obiektu zakresu. Ten atrybut zostanie przekazany do atrybutu ng-show angular w celu kontrolowania widoczności kontrolki div. Początkowo ustawiamy to na false, aby po pierwszym wyświetleniu strony znacznik div był ukryty.
- Dodajemy kod do funkcji ShowHide, która ustawi zmienną składową IsVisible na wartość true, dzięki czemu znacznik div będzie mógł zostać wyświetlony użytkownikowi.
Jeśli kod polecenia ng show hide zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący wynik.
Wyjście:
Z wyjścia,
- Początkowo możesz zobaczyć, że znacznik div zawierający tekst „AngularJs” jest początkowo wyświetlany, ponieważ wartość właściwości false jest wysyłana do dyrektywy ng-hide.
- Kiedy klikniemy przycisk „Ukryj 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 „Angular” będzie ukryte.
Dyrektywy odbiornika zdarzeń AngularJS
Możesz dodać detektory zdarzeń AngularJS do swoich elementów HTML, używając jednego lub więcej z nich Dyrektywy:
- rozmycie
- zmiana
- kliknij
- kopia ng
- ng-cięcie
- ng-dblclick
- ng-focus
- ng-keydown
- naciśnięcie klawisza ng
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-wklej
Podsumowanie
- Dyrektywy zdarzeń są używane w Angularze do dodawania niestandardowego kodu w celu reagowania na zdarzenia generowane przez interwencję użytkownika, takie jak kliknięcia przycisków, kliknięcia klawiaturą i myszą itp.
- Najpopularniejszą dyrektywą zdarzeń jest dyrektywa ng-click AngularJS, która służy do obsługi zdarzeń kliknięcia. Najczęstszym zastosowaniem tego jest kliknięcie przycisków AngluarJS, w którym można dodać kod odpowiadający na kliknięcie przycisku.
- Elementy HTML można również odpowiednio ukryć lub pokazać użytkownikowi, korzystając z opcji Dyrektywa AngularJS ng-show, Dyrektywa kątowa ng-hide i atrybuty ng-visible.
