AngularJS ng-click, ng-show & ng-hide direktiivid

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS sündmused võimaldavad veebirakendusel reageerida kasutaja sisendile, näiteks hiireklõpsudele, klahvivajutustele ja kursori liigutamisele. Sellised direktiivid nagu ng-click, ng-show ja ng-hide seovad selle käitumise deklaratiivselt märgistuses, mitte käsitsi DOM-kuulajate kaudu.

  • 🖱️ Klõpsude käsitlemine: ng-click lisab elemendile, kõige sagedamini nupule, avaldise või kontrolleri funktsiooni.
  • 👁️ Tingimuslik kuvamine: ng-show renderdab elemendi, kui selle avaldis on tõene, samas kui ng-hide eemaldab selle, kui avaldis on tõene.
  • 🎨 Mehhanism: Mõlemad direktiivid lülitavad sisse sisseehitatud ng-hide CSS-klassi, mis määrab display väärtuseks none, nii et element jääb DOM-i.
  • 🔗 Ulatuse sidumine: Muutujale $scope paigutatud liikmemuutuja suurendab nähtavust ja selle muutmine käitleja sees uuendab vaadet kohe.
  • ???? Direktiivi ulatus: Kaheksateist kuulamisdirektiivi hõlmavad hägususe, muutmise, fokuseerimise, klaviatuuri, hiire, kleepimise ja esitamise sündmusi.
  • ⚠️ Toe staatus: AngularJS-i eluiga lõppes 31. detsembril 2021, seega peaksid uued projektid keskenduma hoopis moodsale Angularile.
Loe rohkem

AngularJS ng-click ng-show ng-hide direktiivid

AngularJS sündmused

AngularJS sündmused on funktsioonid, mis võimaldavad veebirakendustel suhelda kasutaja sisenditega, näiteks hiireklõpsud, klaviatuuril sisestamine ja hiire kursoriga liigutamine. Veebirakendustes tuleb sündmusi käsitleda konkreetsete ülesannete ja toimingute täitmiseks ning igaüks neist käivitatakse siis, kui kasutaja teeb vastava toimingu.

Veebirakenduste loomisel peab teie rakendus varem või hiljem hakkama saama DOM-sündmustega, nagu hiireklõpsud ja -liigutused, klahvivajutused ja muutuste sündmused. AngularJS annab direktiive, mis käsitlevad neid sündmusi deklaratiivselt.

Näiteks kui lehel olev nupp peaks klõpsamisel midagi töötlema, pakub selle konksu ng-click sündmuse direktiiv.

⚠️ Tugiteade: AngularJS jõudis eluea lõpp 31. detsembril 2021 ja ei saa Angulari meeskonnalt täiendavaid parandusi ega turvaparandusi. Allolevad direktiivid kehtivad olemasolevate AngularJS 1.x rakenduste haldamiseks; uue töö jaoks kasutage kaasaegseid nurgeline, kus need direktiivid asendatakse sündmuste sidumisega, näiteks (click) ja *ngIf.

Mis on ng-click direktiiv AngularJS-is?

. "ng-click direktiiv" AngularJS-is rakendab see kohandatud käitumist HTML-elemendi klõpsamisel. Tavaliselt kasutatakse seda nuppude puhul, kuna need on kõige levinumad kohad klõpsamisvastuste lisamiseks ja seda kasutatakse ka klõpsamisel märguannete kuvamiseks.

ng-kliki süntaks AngularJS-is

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

Näide ng-klikist AngularJS-is

Selles ng-clicki näites suureneb loenduri muutuja iga kord, kui kasutaja nupule klõpsab.

ng-click direktiiv AngularJS-is

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

  1. ng-init direktiiv määrab kohaliku muutuja count kuni 0.
  2. Nupu ng-click käsk suurendab count iga klõpsuga 1 võrra.
  3. Interpoleerimine {{count}} kuvab kasutajale praeguse väärtuse.

Väljund:

ng-klõpsake AngularJS-is

Kuvatakse nupp „Suurenda“ ja loendus on algselt null. Sellele klõpsamine suurendab väärtust, nagu alloleval pildil näha.

ng-klõpsake AngularJS-is

Mis on ng-show direktiiv AngularJS-is?

. ng-show direktiiv näitab või peidab antud HTML element, mis põhineb ng-show atribuudile antud avaldisel. Sisemiselt kuvatakse või peidetakse elementi selle eemaldamise või lisamise teel. .ng-hide CSS-klass, eelmääratletud klass, mis määrab display et none.

ng-show süntaks AngularJS-is

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

Näide ng-show'st AngularJS-is

See näide kasutab peidetud elemendi kuvamiseks ng-show'd.

ng-show direktiiv AngularJS-is

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

  1. Nupul olev ng-click direktiiv viitab a-le ShowHide kontrolleris määratletud funktsioon DemoController.
  2. Atribuut ng-show on lisatud div-ile, mis sisaldab teksti „Angular”. See on element, mille nähtavust kontrollitakse.
  3. Kontrolleris IsVisible liikmemuutuja paigutatakse ulatusobjektile ja initsialiseeritakse false, seega div peidetakse lehe esmakordsel laadimisel. ng-show puhul on väärtus tõsi kuvab elemendi ja vale peidab seda.
  4. . ShowHide funktsioonide komplektid IsVisible väärtuseks tõene, nii et div muutub nähtavaks.

Väljund:

ng-show direktiiv AngularJS-is

Teksti sisaldavat div-i esialgu ei kuvata, sest IsVisible algab valena. Klõpsamine Näita nurka määrab selle väärtuseks tõene ja tekst muutub nähtavaks.

ng-show direktiiv AngularJS-is

SEOTUD ARTIKLID

Mis on ng-hide direktiiv AngularJS-is?

. ng-hide direktiiv peidab elemendi, kui selle avaldis annab tulemuseks TRUE, ja näitab elementi, kui avaldis on FALSE – ng-show täpne vastand. Sisemiselt kasutab see sama .ng-hide CSS-klass.

ng-hide süntaks AngularJS-is

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

AngularJS-i ng-hide näide

See näide peegeldab ng-show näidet, seega saab kahte direktiivi otse võrrelda.

ng-hide direktiiv AngularJS-is

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

  1. Nupul olev ng-click direktiiv viitab ShowHide funktsiooni sisse DemoController.
  2. . ng-peida atribuut on lisatud div-ile, mis sisaldab teksti Angular.
  3. IsVisible on initsialiseeritud falseKuna tegemist on pigem ng-hide'i kui ng-show'ga, tähendab väärtus „false” (väär) div-i olemasolu. nähtav kui leht esimest korda laeb.
  4. . ShowHide funktsioonide komplektid IsVisible väärtuseks tõene, mis peidab div-i.

Väljund:

ng-hide direktiiv AngularJS-is

Div-i kuvatakse esialgu, kuna ng-hide'ile edastatakse „false”. Klõpsates Peida nurk läheb tõeks ja sõna kaob.

ng-hide direktiiv AngularJS-is

ng-show vs ng-hide vs ng-if: peamised erinevused

Kolm direktiivi kontrollivad, kas kasutaja näeb elementi, ja nende vahel valimine mõjutab nii käitumist kui ka renderdamise jõudlust. Kaks esimest lülitavad sisse ja välja ainult CSS-klassi, nii et element on lehel alati olemas; kolmas lisab ja eemaldab elemendi enda.

Aspekt ng-show ng-peida ng-if
Element on nähtav, kui Väljend on tõene Avaldis on vale Väljend on tõene
DOM-i element Alati Alati Ainult siis, kui see on tõsi
Kasutatud meetod Toggles .ng-hide klass Toggles .ng-hide klass Loob ja hävitab elemendi
Lapse ulatus Jagab ülemulatust Jagab ülemulatust Loob uue lapse ulatuse
Vaatlejad peidus olles Ikka veel aktiivne Ikka veel aktiivne Eemaldatud
Parim on Kerge sisu sagedane lülitamine/vahetamine Pööratud tingimused Rasket sisu kuvatakse harva

Kui element sageli lülitub (shutting), kasutage käsku ng-show või ng-hide, kuna elementi ei ehitata kunagi uuesti üles ja lülitumine maksab ainult klassi vahetuse. Kasutage käsku ng-if kallite, harva kuvatavate sektsioonide jaoks, kuna elemendi eemaldamine eemaldab ka selle jälgijad ja vähendab iga tsükli kokkuvõtte maksumust.

AngularJS sündmuste kuulaja direktiivid

Saate HTML-elementidele lisada AngularJS-i sündmuste kuulajaid, kasutades ühte või mitut neist direktiivid:

  • ng-hägu
  • ng-muutus
  • ng-klõps
  • ng-koopia
  • ng-lõigatud
  • ng-dblclick
  • ng-fookus
  • ng-keydown
  • ng-klahvivajutus
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-hiir
  • ng-pasta
  • ng-submit

Iga direktiiv aktsepteerib avaldist ja toores brauseri sündmus on selle sees saadaval kujul $event kui käitleja vajab üksikasju, näiteks vajutatud klahvi või klõpsu koordinaate.

KKK

Mööda reserveeritud $event muutuv, nagu näiteks ng-click="handle($event)"Seejärel saab kontroller natiivse sündmuse ja saab lugeda sihtmärki, koordinaate või kutsuda funktsiooni preventDefault.

ng-repeat loob iga elemendi kohta lapse ulatuse, seega primitiivi määramine käitleja sees uuendab ainult seda last. Kirjutage objekti atribuuti vanema ulatusse või kasutage $parent, et muutus oleks väljastpoolt nähtav.

Osaliselt. AI tööriistad teisendavad ng-clicki (click) ja ng-show'le *ngIf usaldusväärselt, kuid ulatusest sõltuv loogika ja kahesuunalised seosed vajavad käsitsi ülevaatamist, kuna AngularJS-i ulatusel puudub otsene Angular-ekvivalent.

Tehisintellekti assistendid leiavad tavalised põhjused kiiresti ära: puuduva ng-rakenduse, kontrolleri nime, mis ei vasta mooduli registreeringule, või trükivea direktiivi atribuudis. Soovitatud parandust tuleb veel brauseris testida.

Ei. AngularJS pakub ainult ng-show, ng-hide ja ng-if käske. Ng-visible direktiivi pole ja sellele viitamine ei anna mingit efekti, kuna AngularJS ignoreerib tundmatuid atribuute.

Võta see postitus kokku järgmiselt: