AngularJS ng-click, ng-show & ng-hide Direktive s primjerom

By: James Hartman James Hartman
Hours Ažurirano

AngularJS događaji

AngularJS događaji su funkcionalnosti koje web aplikacijama omogućuju interakciju s korisničkim unosima poput klikova mišem, unosa tipkovnice, lebdenja mišem, itd. Događajima je potrebno upravljati u web aplikacijama kako bi se izvršili određeni zadaci i radnje. Pokreće se kada korisnik izvrši određenu radnju.

Kada stvarate web-bazirane aplikacije, prije ili kasnije vaša će aplikacija morati rukovati DOM događajima kao što su klikovi mišem, potezi, pritisci tipkovnice, događaji promjena itd.

AngularJS može dodati funkcionalnost koja se može koristiti za rukovanje takvim događajima.

Na primjer, ako postoji gumb na stranici i želite nešto obraditi kada se klikne na gumb, možemo koristiti Angular ng-click direktivu događaja.

Tijekom ovog tečaja detaljno ćemo proučiti smjernice događaja.

Što je ng-click Direktiva u AngularJS?

The "ng-click direktiva" u AngularJS koristi se za primjenu prilagođenog ponašanja kada se klikne element u HTML-u. Ova se direktiva obično koristi za gumbe jer je to najčešće mjesto za dodavanje događaja koji reagiraju na klikove koje izvrši korisnik. Također se koristi za pojavljivanje skočnih upozorenja kada se klikne gumb.

Sintaksa ng-click u AngularJS

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

Pogledajmo jednostavan primjer kako možemo implementirati klik događaj.

Primjer ng-click-a u AngularJS-u

U ovom primjeru ng-click, imat ćemo varijablu brojača koja će povećati vrijednost kada korisnik klikne gumb.

ng-click Direktiva u AngularJS
Primjer ng klika u 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>

Objašnjenje koda:

  1. Prvo koristimo direktivu ng-init da vrijednost lokalne varijable count postavimo na 0.
  2. Zatim uvodimo direktivu događaja ng-click gumbu. U ovoj direktivi pišemo kod za povećanje vrijednosti varijable brojanja za 1.
  3. Ovdje korisniku prikazujemo vrijednost varijable brojanja.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

ng-klik u AngularJS

Iz gornjeg izlaza,

  • Vidimo da je prikazan gumb "Povećaj" i da je vrijednost varijable brojanja početno nula.
  • Kada kliknete na gumb Povećaj, vrijednost brojanja se povećava u skladu s tim kao što je prikazano na izlaznoj slici ispod.

ng-klik u AngularJS

POVEZANI ČLANCI

Što je ng-show Direktiva u AngularJS?

The ng-Show direktiva u AngularJS-u koristi se za prikazivanje ili skrivanje određenog HTML element temeljen na izrazu danom atributu ng-show. U pozadini se HTML element prikazuje ili skriva uklanjanjem ili dodavanjem .ng-hide CSS klase na element. To je unaprijed definirana CSS klasa koja postavlja prikaz na ništa.

Sintaksa ng-show u AngularJS

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

U pozadini se element prikazuje ili sakriva uklanjanjem ili dodavanjem CSS klase .ng-hide na element.

Primjer ng-show u AngularJS

Pogledajmo ng-show u Angularu. Primjer kako možemo koristiti direktivu “ngshow event” za prikaz skrivenog elementa.

Direktiva ng-show u AngularJS

Primjer ng showa u Angularu
<!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>

Objašnjenje koda:

  1. Elementu gumba prilažemo direktivu događaja ng-click. Ovdje se pozivamo na funkciju pod nazivom "ShowHide" koja je definirana u našem kontroleru - DemoController.
  2. Prilažemo atribut ng-show div oznaci koja sadrži tekst Angular. Ovo je oznaka koju ćemo prikazati/sakriti na temelju atributa ng-show.
  3. U kontroleru pridružujemo varijablu člana "IsVisible" objektu opsega. Ovaj će se atribut proslijediti kutnom atributu ng-show (2. korak) za kontrolu vidljivosti div kontrole. Ovo početno postavljamo na false tako da kada se stranica prvi put prikaže, div oznaka će biti skrivena. Napomena: - Kada je atribut ng-show postavljen na true, naknadna kontrola, koja je u našem slučaju div oznaka, bit će prikazana korisniku. Kada je atribut ng-show postavljen na false, kontrola će biti skrivena od korisnika.
  4. Dodajemo kod funkciji ShowHide koja će varijablu člana IsVisible postaviti na true tako da se AngularJS show hide div na klik oznaci može prikazati korisniku.

Ako se kod za ng-show i ng-hide u AngularJS-u uspješno izvede, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku.

Izlaz: 1

Direktiva ng-show u AngularJS

Iz izlaza,

  • U početku možete vidjeti da oznaka div koja ima tekst "AngularJS" nije prikazana i to je zato što je objekt opsega isVisible inicijalno postavljen na false koja se zatim prosljeđuje direktivi ng-show div oznake.
  • Kada kliknete na gumb "Prikaži AngularJS", on mijenja varijablu člana isVisible da postane istinita i stoga tekst "Angular" postaje vidljiv korisniku. Ispis u nastavku bit će prikazan korisniku.

Direktiva ng-show u AngularJS

Izlaz sada prikazuje oznaku div s Angular tekstom.

Što je ng-hide Direktiva u AngularJS?

The ng-hide direktiva u AngularJS je funkcija pomoću koje će se element sakriti ako je izraz TRUE. Ako je izraz FALSE, element će biti prikazan. U pozadini se element prikazuje ili skriva uklanjanjem ili dodavanjem CSS klase .ng-hide na element.

Sintaksa ng-hide u AngularJS

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

S druge strane s ng-hide, element je skriven ako je izraz istinit, a bit će prikazan ako je lažan.

Primjer ng-hide u AngularJS

Pogledajmo sličan primjer ng-hide kao onaj prikazan za ngShow da pokažemo kako se atributi ng-hide i ng-show mogu koristiti.

Direktiva ng-hide u AngularJS

Primjer ng-hide u 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>

Objašnjenje koda:

  1. Elementu gumba prilažemo direktivu događaja ng-click. Ovdje se pozivamo na funkciju pod nazivom ShowHide koja je definirana u našem kontroleru – DemoController.
  2. Prilažemo atribut ng-hide div oznaci koja sadrži tekst Angular. Ovo je oznaka koju ćemo koristiti za prikaz hide u Angularu na temelju atributa ng-show.
  3. U kontroleru pridružujemo varijablu člana isVisible objektu opsega. Ovaj će se atribut proslijediti kutnom atributu ng-show za kontrolu vidljivosti div kontrole. Ovo početno postavljamo na false tako da kada se stranica prvi put prikaže, div oznaka će biti skrivena.
  4. Dodajemo kod funkciji ShowHide koja će varijablu člana IsVisible postaviti na true kako bi se div oznaka mogla prikazati korisniku.

Ako se kod za ng show hide uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku.

Izlaz:

Direktiva ng-hide u AngularJS

Iz izlaza,

  • U početku možete vidjeti da je div oznaka koja ima tekst "AngularJs" inicijalno prikazana jer se vrijednost svojstva false šalje direktivi ng-hide.
  • Kada kliknemo na gumb "Hide Angular", vrijednost svojstva true bit će poslana direktivi ng-hide. Stoga će se prikazati donji izlaz u kojem će riječ "Angular" biti skrivena.

Direktiva ng-hide u AngularJS

AngularJS smjernice slušatelja događaja

Svojim HTML elementima možete dodati AngularJS slušatelje događaja koristeći jedan ili više njih direktive:

  • ng-zamućenje
  • ng-promjena
  • ng-klik
  • ng-kopija
  • ng-rez
  • ng-dblclick
  • ng-fokus
  • ng-tipka
  • ng-tipkovnica
  • ng-tipka
  • ng-spuštanje miša
  • ng-mouseenter
  • ng-miš ostavi
  • ng-pomakni miša
  • ng-prelazak mišem
  • ng-miš gore
  • ng-pasta

Rezime

  • Direktive o događajima koriste se u Angularu za dodavanje prilagođenog koda za odgovor na događaje generirane intervencijom korisnika kao što su klikovi gumba, klikovi tipkovnice i miša itd.
  • Najčešća direktiva događaja je AngularJS ng-click direktiva koja se koristi za rukovanje događajima klika. Najčešća upotreba ovoga je za AngluarJS klik gumba pri čemu se može dodati kod za odgovor na klik gumba.
  • HTML elementi također se mogu sakriti ili prikazati korisniku u skladu s tim korištenjem Direktiva AngularJS ng-show, Angular ng-hide Direktiva i ng-visible atributi.