Direktivy AngularJS ng-click, ng-show & ng-hide s příkladem

Události AngularJS

Události AngularJS jsou funkce, které umožňují webovým aplikacím interagovat s uživatelskými vstupy, jako je kliknutí myší, vstupy z klávesnice, najetí myší atd. Události je třeba zpracovávat ve webových aplikacích, aby mohly provádět specifické úkoly a akce. Spustí se, když uživatel provede určitou akci.

Při vytváření webových aplikací bude vaše aplikace dříve nebo později muset zpracovat události DOM, jako jsou kliknutí myší, pohyby, stisknutí klávesnice, události změn atd.

AngularJS může přidat funkce, které lze použít ke zpracování takových událostí.

Pokud je například na stránce tlačítko a chcete po kliknutí na tlačítko něco zpracovat, můžeme použít direktivu události Angular ng-click.

Během tohoto kurzu se podrobně podíváme na direktivy událostí.

Co je směrnice ng-click v AngularJS?

Jedno "směrnice ng-click" v AngularJS se používá k použití vlastního chování při kliknutí na prvek v HTML. Tato direktiva se běžně používá pro tlačítka, protože to je nejběžnější místo pro přidávání událostí, které reagují na kliknutí provedená uživatelem. Používá se také pro vyskakovací upozornění při kliknutí na tlačítko.

Syntaxe ng-click v AngularJS

<element
 ng-click="expression">
</element>

Podívejme se na jednoduchý příklad, jak můžeme implementovat událost kliknutí.

Příklad ng-click v AngularJS

V tomto příkladu ng-click budeme mít proměnnou čítače, jejíž hodnota se zvýší, když uživatel klikne na tlačítko.

Direktiva ng-click v AngularJS — Příklad ng click v AngularJS

<!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>

Vysvětlení kódu:

Nejprve používáme direktivu ng-init k nastavení hodnoty počtu lokálních proměnných na 0.
Poté do tlačítka zavádíme direktivu události ng-click. V této direktivě píšeme kód pro zvýšení hodnoty proměnné počet o 1.
Zde zobrazujeme uživateli hodnotu proměnné count.

Pokud je kód úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výše uvedeného výstupu

Vidíme, že je zobrazeno tlačítko „Increment“ a hodnota proměnné count je zpočátku nulová.
Když kliknete na tlačítko Increment, hodnota počtu se odpovídajícím způsobem zvýší, jak je znázorněno na výstupním obrázku níže.

Co je směrnice ng-show v AngularJS?

Jedno direktiva ng-Show v AngularJS se používá k zobrazení nebo skrytí daného konkrétního HTML prvek založený na výrazu poskytnutém atributu ng-show. Na pozadí se prvek HTML zobrazí nebo skryje odstraněním nebo přidáním třídy CSS .ng-hide do prvku. Je to předdefinovaná třída CSS, která nastaví zobrazení na žádné.

Syntaxe ng-show v AngularJS

<element
 ng-show="expression">
</element>

Na pozadí se prvek zobrazí nebo skryje odstraněním nebo přidáním třídy CSS .ng-hide do prvku.

Příklad ng-show v AngularJS

Podívejme se na ng-show v Angular Příklad toho, jak můžeme použít direktivu „ngshow event“ k zobrazení skrytého prvku.

ng-show směrnice v AngularJS — Příklad ng show v Angular

<!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>

Vysvětlení kódu:

K prvku button připojujeme direktivu události ng-click. Zde odkazujeme na funkci nazvanou „ShowHide“, která je definována v našem ovladači – DemoController.
Atribut ng-show připojujeme ke značce div, která obsahuje text Angular. Toto je značka, kterou zobrazíme/skryjeme na základě atributu ng-show.
V ovladači připojujeme členskou proměnnou „IsVisible“ k objektu scope. Tento atribut bude předán atributu ng-show angular (krok č. 2) pro řízení viditelnosti ovládacího prvku div. Zpočátku to nastavujeme na hodnotu false, takže při prvním zobrazení stránky bude značka div skryta. Poznámka: - Když jsou atributy ng-show nastaveny na true, zobrazí se uživateli následný ovládací prvek, kterým je v našem případě značka div. Když je atribut ng-show nastaven na hodnotu false, ovládací prvek bude uživateli skryt.
Do funkce ShowHide přidáváme kód, který nastaví členskou proměnnou IsVisible na hodnotu true, aby se uživateli mohl zobrazit AngularJS show hide div on click tag.

Pokud se kód pro ng-show a ng-hide v AngularJS provede úspěšně, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup: 1

Z výstupu,

Zpočátku můžete vidět, že značka div, která má text „AngularJS“, není zobrazena, a to proto, že objekt rozsahu isVisible je zpočátku nastaven na hodnotu false, která je následně předána direktivě ng-show značky div.
Když kliknete na tlačítko „Show AngularJS“, změní se členská proměnná isVisible na hodnotu true a text „Angular“ se tak stane viditelným pro uživatele. Níže uvedený výstup se zobrazí uživateli.

Výstup nyní zobrazuje tag div s textem Angular.

Co je směrnice ng-hide v AngularJS?

Jedno direktiva ng-hide v AngularJS je funkce, pomocí které bude prvek skrytý, pokud je výraz TRUE. Pokud je výraz FALSE, prvek se zobrazí. Na pozadí se prvek zobrazí nebo skryje odstraněním nebo přidáním třídy CSS .ng-hide do prvku.

Syntaxe ng-hide v AngularJS

<element
 ng-hide="expression">
</element>

Na druhou stranu s ng-hide je prvek skrytý, pokud je výraz pravdivý, a zobrazí se, pokud je nepravdivý.

Příklad ng-hide v AngularJS

Podívejme se na podobný příklad ng-hide, jaký je uveden pro ngShow, abychom ukázali, jak lze použít atributy ng-hide a ng-show.

Direktiva ng-hide v AngularJS — Příklad ng-hide v AngularJS

<!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>

Vysvětlení kódu:

K prvku button připojujeme direktivu události ng-click. Zde odkazujeme na funkci s názvem ShowHide, která je definována v našem ovladači – DemoController.
Atribut ng-hide připojujeme ke značce div, která obsahuje text Angular. Toto je značka, kterou použijeme k zobrazení hide v Angular na základě atributu ng-show.
V ovladači připojujeme členskou proměnnou isVisible k objektu scope. Tento atribut bude předán atributu ng-show angular pro řízení viditelnosti ovládacího prvku div. Zpočátku to nastavujeme na hodnotu false, takže při prvním zobrazení stránky bude značka div skryta.
Do funkce ShowHide přidáváme kód, který nastaví členskou proměnnou IsVisible na hodnotu true, aby se značka div mohla zobrazit uživateli.

Pokud je kód pro ng show hide úspěšně spuštěn, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu,

Nejprve můžete vidět, že značka div, která má text „AngularJs“, je zpočátku zobrazena, protože hodnota vlastnosti false je odeslána direktivě ng-hide.
Když klikneme na tlačítko „Hide Angular“, hodnota vlastnosti true bude odeslána direktivě ng-hide. Proto se zobrazí níže uvedený výstup, ve kterém bude skryto slovo „Angular“.

Direktivy AngularJS Event Listener

Posluchače událostí AngularJS můžete přidat do prvků HTML pomocí jednoho nebo více z nich směrnice:

ng-rozostření
ng-změna
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-přejetí myší
ng-mouseup
ng-paste

Shrnutí

Direktivy událostí se v Angular používají k přidání vlastního kódu, který bude reagovat na události generované zásahem uživatele, jako je kliknutí na tlačítka, kliknutí na klávesnici a myš atd.
Nejběžnější direktivou události je direktiva AngularJS ng-click, která se používá ke zpracování událostí kliknutí. Nejběžnější použití je pro kliknutí na tlačítka AngluarJS, kde lze přidat kód, aby reagoval na kliknutí na tlačítko.
HTML prvky lze také skrýt nebo zobrazit uživateli odpovídajícím způsobem pomocí Směrnice AngularJS ng-show, Angular ng-hide Direktiva a ng-visible atributy.

Události AngularJS

Co je směrnice ng-click v AngularJS?

Syntaxe ng-click v AngularJS

Příklad ng-click v AngularJS

SOUVISEJÍCÍ ČLÁNKY

Co je směrnice ng-show v AngularJS?

Syntaxe ng-show v AngularJS

Příklad ng-show v AngularJS

Co je směrnice ng-hide v AngularJS?

Syntaxe ng-hide v AngularJS

Příklad ng-hide v AngularJS

Direktivy AngularJS Event Listener

Shrnutí

Přihlaste se k odběru newsletteru