AngularJS ng-click, ng-show & ng-piilota direktiivit esimerkillä

by: James Hartman James Hartman
Hours Päivitetty

AngularJS -tapahtumat

AngularJS -tapahtumat ovat toimintoja, joiden avulla verkkosovellukset voivat olla vuorovaikutuksessa käyttäjän syötteiden kanssa, kuten hiiren napsauttaminen, näppäimistön syötteet, hiiren osoitin jne. Tapahtumat on käsiteltävä verkkopohjaisissa sovelluksissa tiettyjen tehtävien ja toimien suorittamiseksi. Se käynnistyy, kun käyttäjä suorittaa tietyn toiminnon.

Kun luot verkkopohjaisia ​​sovelluksia, sovelluksesi on ennemmin tai myöhemmin käsiteltävä DOM-tapahtumia, kuten hiiren napsautuksia, liikkeitä, näppäimistön painalluksia, muutostapahtumia jne.

angularjs voi lisätä toimintoja, joita voidaan käyttää tällaisten tapahtumien käsittelyyn.

Esimerkiksi, jos sivulla on painike ja haluat käsitellä jotain, kun painiketta napsautetaan, voimme käyttää Angular ng-click -tapahtumadirektiiviä.

Tutustumme tapahtumaohjeisiin yksityiskohtaisesti tämän kurssin aikana.

Mikä on ng-click-direktiivi AngularJS:ssä?

- "ng-click direktiivi" AngularJS:ssä käytetään mukautettua käyttäytymistä, kun HTML-elementtiä napsautetaan. Tätä ohjetta käytetään yleensä painikkeille, koska se on yleisin tapa lisätä tapahtumia, jotka vastaavat käyttäjän suorittamiin napsautuksiin. Sitä käytetään myös ponnahdusilmoituksiin, kun painiketta napsautetaan.

ng-clickin syntaksi AngularJS:ssä

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

Katsotaanpa yksinkertaista esimerkkiä siitä, kuinka voimme toteuttaa napsautustapahtuman.

Esimerkki ng-clickista AngularJS:ssä

Tässä ng-click esimerkissä meillä on laskurimuuttuja, jonka arvo kasvaa, kun käyttäjä napsauttaa painiketta.

ng-click direktiivi AngularJS:ssä
Esimerkki ng-napsautuksesta AngularJS:ssä
<!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>

Koodin selitys:

  1. Käytämme ensin ng-init-direktiiviä asettaaksemme paikallisen muuttujan määrän arvoksi 0.
  2. Tämän jälkeen esittelemme painikkeelle ng-click-tapahtumadirektiivin. Tässä direktiivissä kirjoitamme koodia count-muuttujan arvon lisäämiseksi yhdellä.
  3. Tässä näytämme käyttäjälle count-muuttujan arvon.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

ng-klikkaa AngularJS:ssä

Yllä olevasta lähdöstä

  • Näemme, että painike "Increment" tulee näkyviin ja count muuttujan arvo on aluksi nolla.
  • Kun napsautat Kasvata-painiketta, luvun arvoa kasvatetaan vastaavasti alla olevassa tuloskuvassa esitetyllä tavalla.

ng-klikkaa AngularJS:ssä

AIHEESEEN LIITTYVÄT ARTIKKELIT

Mikä on ng-show-direktiivi AngularJS:ssä?

- ng-Show direktiivi AngularJS:ssä käytetään tietyn tietyn näyttämiseen tai piilottamiseen HTML elementti perustuu ng-show-attribuutille annettuun lausekkeeseen. Taustalla HTML-elementti näytetään tai piilotetaan poistamalla tai lisäämällä elementtiin .ng-hide CSS-luokka. Se on ennalta määritetty CSS-luokka, joka asettaa näytön none-tilaan.

ng-shown syntaksi AngularJS:ssä

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

Taustalla elementti näytetään tai piilotetaan poistamalla tai lisäämällä elementtiin .ng-hide CSS-luokka.

Esimerkki ng-showsta AngularJS:ssä

Katsotaanpa ng-showta Angular esimerkissä kuinka voimme käyttää "ngshow event" -direktiiviä piilotetun elementin näyttämiseen.

ng-show direktiivi AngularJS:ssä

Esimerkki esityksestä Angularissa
<!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>

Koodin selitys:

  1. Liitämme ng-click tapahtumadirektiivin painikeelementtiin. Tässä viittaamme toimintoon nimeltä "ShowHide", joka on määritelty ohjaimessamme - DemoController.
  2. Liitämme ng-show-attribuutin div-tunnisteeseen, joka sisältää tekstin Angular. Tämä on tagi, jonka aiomme näyttää/piilottaa ng-show-attribuutin perusteella.
  3. Ohjaimessa liitämme "IsVisible" -jäsenmuuttujan laajuusobjektiin. Tämä attribuutti välitetään ng-show angular-attribuutille (vaihe#2) div-säätimen näkyvyyden hallitsemiseksi. Asetamme tämän aluksi epätosi, jotta div-tunniste piilotetaan, kun sivu näytetään ensimmäisen kerran. Huomautus: - Kun attribuutin ng-show arvoksi on asetettu tosi, seuraava ohjaus, joka tässä tapauksessa on div tagi, näytetään käyttäjälle. Kun ng-show-attribuutti on asetettu arvoon false, ohjausobjekti piilotetaan käyttäjältä.
  4. Lisäämme ShowHide-funktioon koodin, joka asettaa IsVisible-jäsenmuuttujan arvoon tosi, jotta AngularJS show hide div napsautustunnisteessa voidaan näyttää käyttäjälle.

Jos ng-show- ja ng-hide-koodi AngularJS:ssä suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodisi selaimessa.

Lähtö: 1

ng-show direktiivi AngularJS:ssä

Ulostulosta,

  • Voit aluksi nähdä, että div-tunnistetta, jossa on teksti "AngularJS", ei näytetä, ja tämä johtuu siitä, että isVisible-alueobjektin arvoksi on asetettu alun perin epätosi, joka sitten siirretään div-tunnisteen ng-show-direktiiviin.
  • Kun napsautat "Näytä AngularJS" -painiketta, se muuttaa isVisible-jäsenmuuttujan todeksi ja siten teksti "Angular" tulee näkyviin käyttäjälle. Alla oleva tulos näytetään käyttäjälle.

ng-show direktiivi AngularJS:ssä

Tulos näyttää nyt div-tunnisteen ja Angular-tekstin.

Mikä on ng-hide-direktiivi AngularJS:ssä?

- ng-hide -direktiivi AngularJS:ssä on funktio, jonka avulla elementti piilotetaan, jos lauseke on TOSI. Jos lauseke on EPÄTOSI, elementti näytetään. Taustalla elementti näytetään tai piilotetaan poistamalla tai lisäämällä elementtiin .ng-hide CSS-luokka.

Sanan ng-hide syntaksi AngularJS:ssä

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

Toisaalta ng-hide:lla elementti on piilotettu, jos lauseke on tosi, ja se näytetään, jos se on epätosi.

Esimerkki ng-hidesta AngularJS:ssä

Katsotaanpa samanlaista ng-hide-esimerkkiä kuin ngShow:lle esitellään, kuinka ng-hide- ja ng-show-attribuutteja voidaan käyttää.

ng-hide direktiivi AngularJS:ssä

Esimerkki ng-hidesta AngularJS:ssä
<!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>

Koodin selitys:

  1. Liitämme ng-click tapahtumadirektiivin painikeelementtiin. Tässä viittaamme toimintoon nimeltä ShowHide, joka on määritelty ohjaimessamme - DemoController.
  2. Liitämme ng-hide-attribuutin div-tunnisteeseen, joka sisältää tekstin Angular. Tämä on tunniste, jota käytämme piilottamaan Angularissa ng-show-attribuutin perusteella.
  3. Ohjaimessa liitetään isVisible-jäsenmuuttuja soveltamisalaobjektiin. Tämä attribuutti välitetään ng-show angular -attribuutille div-säätimen näkyvyyden hallitsemiseksi. Asetamme tämän aluksi epätosi, jotta div-tunniste piilotetaan, kun sivu näytetään ensimmäisen kerran.
  4. Lisäämme koodin ShowHide-funktioon, joka asettaa IsVisible-jäsenmuuttujan arvoon tosi, jotta div-tunniste voidaan näyttää käyttäjälle.

Jos ng show hide -koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

ng-hide direktiivi AngularJS:ssä

Ulostulosta,

  • Voit aluksi nähdä, että div-tunniste, jossa on teksti "AngularJs", näytetään aluksi, koska ominaisuuden arvo false lähetetään ng-hide -direktiiviin.
  • Kun napsautamme "Piilota kulma" -painiketta, ominaisuusarvo true lähetetään ng-hide -direktiiville. Tästä syystä näytetään alla oleva tulos, jossa sana "Angular" piilotetaan.

ng-hide direktiivi AngularJS:ssä

AngularJS-tapahtumanseurantaohjeet

Voit lisätä AngularJS-tapahtumakuuntelijoita HTML-elementteihisi käyttämällä yhtä tai useampaa näistä direktiivien:

  • ng-blur
  • ng-muutos
  • ng-klikkaa
  • ng-kopio
  • ng-leikattu
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-näppäinpainallus
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-pasta

Yhteenveto

  • Tapahtumadirektiivejä käytetään Angularissa mukautetun koodin lisäämiseen vastaamaan käyttäjän toimien synnyttämiin tapahtumiin, kuten painikkeiden napsautukseen, näppäimistön ja hiiren napsautuksiin jne.
  • Yleisin tapahtumadirektiivi on AngularJS ng-click -direktiivi, jota käytetään napsautustapahtumien käsittelyyn. Yleisin käyttö on AngluarJS-painikkeiden napsautus, jossa koodia voidaan lisätä vastaamaan painikkeen napsautukseen.
  • HTML-elementtejä voidaan myös piilottaa tai näyttää käyttäjälle vastaavasti käyttämällä AngularJS ng-show -direktiivi, Angular ng-hide -direktiivi ja ng-näkyvät attribuutit.

Päivittäinen Guru99-uutiskirje

Aloita päiväsi uusimmilla ja tärkeimmillä tekoälyuutisilla, jotka toimitetaan juuri nyt.