AngularJS ng-click, ng-show ja ng-hide -ohjeet

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS-tapahtumien avulla verkkosovellus voi reagoida käyttäjän syötteisiin, kuten hiiren napsautuksiin, näppäinpainalluksiin ja osoittimen päälle asettamiseen. Ng-click-, ng-show- ja ng-hide-direktiivit sitovat tämän toiminnan deklaratiivisesti merkintöihin manuaalisten DOM-kuuntelijoiden sijaan.

  • 🖱️ Klikkausten käsittely: ng-click liittää lausekkeen tai ohjainfunktion elementtiin, useimmiten painikkeeseen.
  • 👁️ Ehdollinen näyttö: ng-show renderöi elementin, kun sen lauseke on tosi, kun taas ng-hide poistaa sen, kun lauseke on tosi.
  • 🎨 Mekanismi: Molemmat direktiivit kytkevät päälle/pois sisäänrakennetun ng-hide CSS-luokan, joka asettaa display-arvoksi none, joten elementti pysyy DOM:ssa.
  • 🔗 Laajuussidonta: $scope-muuttujaan sijoitettu jäsenmuuttuja parantaa näkyvyyttä, ja sen muuttaminen käsittelijän sisällä päivittää näkymän välittömästi.
  • 📋 Direktiivialue: Kahdeksantoista kuuntelijadirektiiviä kattavat sumennus-, muutos-, tarkennus-, näppäimistö-, hiiri-, liitä- ja lähetystapahtumat.
  • ⚠️ Tuen tila: AngularJS:n elinkaari päättyi 31. joulukuuta 2021, joten uusien projektien tulisi keskittyä nykyaikaiseen Angulariin.
Lue lisää

AngularJS ng-click ng-näytä ng-piilota direktiivit

AngularJS -tapahtumat

AngularJS -tapahtumat ovat toimintoja, joiden avulla verkkosovellukset voivat olla vuorovaikutuksessa käyttäjän syötteiden, kuten hiiren napsautusten, näppäimistösyötteiden ja hiiren osoittimen, kanssa. Verkkosovellusten on käsiteltävä tapahtumia tiettyjen tehtävien ja toimintojen suorittamiseksi, ja jokainen niistä käynnistyy, kun käyttäjä suorittaa vastaavan toiminnon.

Verkkosovelluksia luotaessa sovelluksesi joutuu ennemmin tai myöhemmin käsittelemään DOM-tapahtumia, kuten hiiren napsautuksia ja liikkeitä, näppäimistön painalluksia ja muutostapahtumia. angularjs toimittaa direktiivejä, jotka käsittelevät näitä tapahtumia deklaratiivisesti.

Jos esimerkiksi sivulla olevan painikkeen tulisi käsitellä jotakin klikattaessa, ng-click-tapahtumadirektiivi tarjoaa kyseisen koukun.

⚠️ Tukitiedote: AngularJS saavutettu käyttöiän päättyessä 31. joulukuuta 2021 eikä saa enää korjauksia tai tietoturvakorjauksia Angular-tiimiltä. Alla olevat ohjeet pysyvät voimassa olemassa olevien AngularJS 1.x -sovellusten ylläpidossa; uusiin töihin käytä moderneja Kulma-, jossa nämä direktiivit korvataan tapahtumasidonnoilla, kuten (click) ja *ngIf.

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

"ng-click direktiivi" AngularJS:ssä käytetään mukautettua toimintaa, kun HTML-elementtiä napsautetaan. Sitä käytetään yleensä painikkeissa, koska ne ovat yleisin paikka liittää napsautusvastauksia, ja sitä käytetään myös hälytysten luomiseen napsautuksesta.

ng-clickin syntaksi AngularJS:ssä

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

Esimerkki ng-clickista AngularJS:ssä

Tässä ng-click-esimerkissä laskurimuuttuja kasvaa joka kerta, kun käyttäjä napsauttaa painiketta.

ng-click direktiivi AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Selitys:

  1. ng-init-direktiivi asettaa paikallisen muuttujan count on 0.
  2. Painikkeen ng-click-käsky kasvattaa arvoa count yhdellä jokaisella klikkauksella.
  3. Interpolointi {{count}} näyttää käyttäjälle nykyisen arvon.

lähtö:

ng-klikkaa AngularJS:ssä

Näyttöön tulee Lisää-painike ja laskuri on aluksi nolla. Sitä napsauttamalla arvo kasvaa, kuten alla olevassa kuvassa näkyy.

ng-klikkaa AngularJS:ssä

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

ng-show-direktiivi näyttää tai piilottaa tietyn HTML elementti, joka perustuu ng-show-attribuutille annettuun lausekkeeseen. Sisäisesti elementti näytetään tai piilotetaan poistamalla tai lisäämällä .ng-hide CSS-luokka, ennalta määritetty luokka, joka asettaa display että none.

ng-shown syntaksi AngularJS:ssä

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

Esimerkki ng-showsta AngularJS:ssä

Tässä esimerkissä käytetään ng-show-funktiota piilotetun elementin paljastamiseen.

ng-show direktiivi AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Selitys:

  1. Painikkeen ng-click-käsky viittaa a:han ShowHide ohjaimessa määritelty toiminto DemoController.
  2. ng-show-attribuutti on liitetty div-elementtiin, joka sisältää tekstin Angular. Tämän elementin näkyvyyttä hallitaan.
  3. Ohjaimessa IsVisible jäsenmuuttuja sijoitetaan scope-objektiin ja alustetaan muotoon false, joten div-elementti piilotetaan sivun latautuessa ensimmäisen kerran. ng-show-funktiolla arvo totta näyttää elementin ja väärä piilottaa sen.
  4. ShowHide funktiojoukot IsVisible arvoksi true, jotta div-elementti tulee näkyviin.

lähtö:

ng-show direktiivi AngularJS:ssä

Tekstiä sisältävää div-elementtiä ei näytetä aluksi, koska IsVisible alkaa epätosina. Napsauttaminen Näytä Angular asettaa sen arvoksi true ja teksti tulee näkyviin.

ng-show direktiivi AngularJS:ssä

Älä Miss:

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

ng-hide -direktiivi piilottaa elementin, kun sen lauseke on TOSI, ja näyttää elementin, kun lauseke on EPÄTOSI – ng-show'n täydellinen käänteisvaikutus. Sisäisesti se käyttää samaa .ng-hide CSS-luokka.

Sanan ng-hide syntaksi AngularJS:ssä

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

Esimerkki ng-hidesta AngularJS:ssä

Tämä esimerkki peilaa ng-show-esimerkkiä, joten kahta direktiiviä voidaan verrata suoraan.

ng-hide direktiivi AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.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 = true;
        };
    });
</script>

</body>
</html>

Code Selitys:

  1. Painikkeen ng-click-käsky viittaa ShowHide toiminto DemoController.
  2. ng-hide attribuutti on liitetty div-elementtiin, joka sisältää tekstin Angular.
  3. IsVisible on alustettu falseKoska tämä on ng-hide eikä ng-show, false-arvo tarkoittaa, että div on näkyvä kun sivu latautuu ensimmäisen kerran.
  4. ShowHide funktiojoukot IsVisible arvoksi true, joka piilottaa div-merkin.

lähtö:

ng-hide direktiivi AngularJS:ssä

Div-elementti näytetään aluksi, koska ng-hide-funktiolle annetaan false. Piilota Angular pitää paikkansa ja sana katoaa.

ng-hide direktiivi AngularJS:ssä

ng-show vs ng-hide vs ng-if: Keskeiset erot

Kolme direktiiviä ohjaavat, näkeekö käyttäjä elementin, ja niiden välillä valitseminen vaikuttaa sekä toimintaan että renderöinnin suorituskykyyn. Kaksi ensimmäistä vain vaihtavat CSS-luokkaa, joten elementti on aina sivulla; kolmas lisää ja poistaa itse elementin.

Aspect ng-show ng-hide ng-if
Elementti näkyy, kun Ilmaus on totta Lauseke on epätosi Ilmaus on totta
DOM-elementti Aina Aina Vain silloin kun se on totta
Käytetty menetelmä Toggles .ng-hide-luokka Toggles .ng-hide-luokka Luo ja tuhoaa elementin
Lapsilaajuus Jakaa päälaajuuden Jakaa päälaajuuden Luo uuden alilaajuusalueen
Piilossa olevat tarkkailijat Yhä aktiivinen Yhä aktiivinen poistettu
Parasta Kevyen sisällön usein päälle/pois kytkeminen Käänteiset olosuhteet Raskasta sisältöä näytetään harvoin

Käytä ng-show- tai ng-hide-käskyä, kun elementti vaihtuu usein, koska elementtiä ei koskaan rakenneta uudelleen ja vaihtuminen maksaa vain luokanvaihdoksen. Käytä ng-if-käskyä kalliille osioille, joita näytetään harvoin, koska elementin poistaminen poistaa myös sen tarkkailijat ja vähentää tiivisteiden kustannuksia jokaisella syklillä.

AngularJS-tapahtumanseurantaohjeet

Voit lisätä AngularJS-tapahtumakuuntelijoita HTML-elementteihin 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
  • ng-submit

Jokainen direktiivi hyväksyy lausekkeen, ja raaka selaintapahtuma on saatavilla sen sisällä muodossa $event kun käsittelijä tarvitsee tietoja, kuten painetun näppäimen tai klikkauksen koordinaatit.

UKK

Ohita varattu $event muuttuja, kuten ng-click="handle($event)"Ohjain vastaanottaa sitten natiivin tapahtuman ja voi lukea kohteen, koordinaatit tai kutsua preventDefault-funktiota.

ng-repeat luo lapsialueen jokaista kohdetta kohden, joten käsittelijän sisällä olevan primitiivin määrittäminen päivittää vain kyseisen lapsen. Kirjoita pääalueen objektiominaisuuteen tai käytä $parent, jotta muutos näkyy ulospäin.

Osittain. AI työkalut muuntavat ng-clickin muotoon (click) ja ng-show'hun *ngIf luotettavasti, mutta laajuusriippuvainen logiikka ja kaksisuuntaiset sidokset vaativat manuaalisen tarkistuksen, koska AngularJS-laajuusalueella ei ole suoraa Angular-vastinetta.

Tekoälyavustajat havaitsevat tavanomaiset syyt nopeasti: puuttuvan ng-sovelluksen, ohjaimen nimen, joka ei vastaa moduulin rekisteröintiä, tai kirjoitusvirheen direktiiviattribuutissa. Ehdotettu korjaus vaatii vielä testausta selaimessa.

Ei. AngularJS tarjoaa vain ng-show-, ng-hide- ja ng-if-käskyt. Ng-visible-direktiiviä ei ole, ja siihen viittaaminen ei tuota mitään vaikutusta, koska AngularJS jättää huomiotta tunnistamattomat attribuutit.

Tiivistä tämä viesti seuraavasti: