AngularJS ng-click, ng-show & ng-peida direktiivid koos näitega

Autor: James Hartman James Hartman
Hours Ajakohastatud

AngularJS sündmused

AngularJS sündmused on funktsioonid, mis võimaldavad veebirakendustel suhelda kasutaja sisenditega, nagu hiireklõps, klaviatuurisisendid, hiirekursor jne. Konkreetsete ülesannete ja toimingute tegemiseks tuleb sündmusi käsitleda veebipõhistes rakendustes. See käivitub, kui kasutaja teeb konkreetse toimingu.

Veebipõhiste rakenduste loomisel peab teie rakendus varem või hiljem käsitlema DOM-i sündmusi, nagu hiireklõpsud, liigutused, klaviatuurivajutused, muutmissündmused jne.

AngularJS saab lisada funktsioone, mida saab selliste sündmuste käsitlemiseks kasutada.

Näiteks kui lehel on nupp ja soovite nupule klõpsamisel midagi töödelda, saame kasutada Angular ng-click sündmuse direktiivi.

Selle kursuse jooksul uurime üksikasjalikult sündmuste juhiseid.

Mis on ng-click direktiiv AngularJS-is?

. "ng-click direktiiv" AngularJS-is kasutatakse kohandatud käitumise rakendamiseks HTML-i elemendil klõpsamisel. Seda käsku kasutatakse tavaliselt nuppude puhul, kuna see on kõige tavalisem koht sündmuste lisamiseks, mis reageerivad kasutaja tehtud klikkidele. Seda kasutatakse ka nupu klõpsamise korral hoiatusteadete kuvamiseks.

ng-kliki süntaks AngularJS-is

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

Vaatame lihtsat näidet selle kohta, kuidas saame klõpsusündmust rakendada.

Näide ng-klikist AngularJS-is

Selles ng-click näites on meil loenduri muutuja, mille väärtus suureneb, kui kasutaja klõpsab nuppu.

ng-click direktiiv AngularJS-is
Näide ng-klikist AngularJS-is
<!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>

Koodi selgitus:

  1. Esmalt kasutame ng-init direktiivi, et määrata kohaliku muutuja loenduse väärtuseks 0.
  2. Seejärel tutvustame nupule ng-click sündmuse direktiivi. Selles direktiivis kirjutame koodi, et suurendada loendusmuutuja väärtust 1 võrra.
  3. Siin kuvame kasutajale loendusmuutuja väärtuse.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

ng-klõpsake AngularJS-is

Ülaltoodud väljundist

  • Näeme, et kuvatakse nupp “Increment” ja loendusmuutuja väärtus on algselt null.
  • Kui klõpsate nupul Suurenda, suurendatakse loenduse väärtust vastavalt, nagu on näidatud alloleval väljundpildil.

ng-klõpsake AngularJS-is

SEOTUD ARTIKLID

Mis on ng-show direktiiv AngularJS-is?

. ng-Show direktiiv AngularJS-is kasutatakse konkreetse konkreetse kuvamiseks või peitmiseks HTML element, mis põhineb atribuudile ng-show antud avaldisel. Taustal kuvatakse või peidetakse HTML-elementi, eemaldades või lisades elemendile CSS-klassi .ng-hide. See on eelmääratletud CSS-klass, mis seab kuva olekusse None.

ng-show süntaks AngularJS-is

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

Taustal kuvatakse või peidetakse elementi, eemaldades või lisades elemendile CSS-klassi .ng-hide.

Näide ng-show'st AngularJS-is

Vaatame ng-show'd nurganäites selle kohta, kuidas saame peidetud elemendi kuvamiseks kasutada käsku "ngshow event".

ng-show direktiiv AngularJS-is

Näide ng show'st nurgas
<!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>

Koodi selgitus:

  1. Kinnitame nupu elemendile ng-click sündmuse direktiivi. Siin viitame funktsioonile nimega "ShowHide", mis on määratletud meie kontrolleris - DemoController.
  2. Kinnitame atribuudi ng-show sildile div, mis sisaldab teksti Angular. See on silt, mida me näitame/peidame atribuudi ng-show alusel.
  3. Kontrolleris lisame ulatuse objektile liikmemuutuja "IsVisible". See atribuut edastatakse atribuudile ng-show angular (samm nr 2), et juhtida div-juhtelemendi nähtavust. Algselt määrame selle väärtuseks Väär, nii et lehe esmakordsel kuvamisel peidetakse märgend div. Märkus: - Kui atribuudid ng-show on seatud väärtusele Tõene, näidatakse kasutajale järgnevat juhtelementi, mis meie puhul on silt div. Kui atribuut ng-show on seatud väärtusele Väär, peidetakse juhtelement kasutaja eest.
  4. Lisame funktsiooni ShowHide koodi, mis seab IsVisible liikme muutuja väärtuseks Tõene, et kasutajale saaks kuvada AngularJS show hide div klikimärgendil.

Kui ng-show ja ng-hide kood AngularJS-is käivitatakse edukalt, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund: 1

ng-show direktiiv AngularJS-is

Väljundist,

  • Esialgu näete, et div-märgendit, millel on tekst "AngularJS", ei kuvata ja see on tingitud sellest, et isVisible ulatuse objekt on algselt seatud väärtusele Väär, mis seejärel edastatakse div-sildi ng-show direktiivile.
  • Kui klõpsate nupul "Näita AngularJS", muudab see isVisible liikme muutuja tõeseks ja seega muutub tekst "Angular" kasutajale nähtavaks. Allolevat väljundit näidatakse kasutajale.

ng-show direktiiv AngularJS-is

Väljundis kuvatakse nüüd div silt koos nurga tekstiga.

Mis on ng-hide direktiiv AngularJS-is?

. ng-hide direktiiv AngularJS-is on funktsioon, mille abil element peidetakse, kui avaldis on TRUE. Kui avaldis on FALSE, kuvatakse element. Taustal kuvatakse või peidetakse elementi, eemaldades või lisades elemendile CSS-klassi .ng-hide.

ng-hide süntaks AngularJS-is

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

Teisest küljest on ng-hide puhul element peidetud, kui avaldis on tõene, ja seda näidatakse, kui see on väär.

AngularJS-i ng-hide näide

Vaatame sarnast ng-hide näidet nagu ngShow puhul, et näidata, kuidas saab kasutada atribuute ng-hide ja ng-show.

ng-hide direktiiv AngularJS-is

AngularJS-i ng-hide näide
<!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>

Koodi selgitus:

  1. Kinnitame nupu elemendile ng-click sündmuse direktiivi. Siin viitame funktsioonile nimega ShowHide, mis on määratletud meie kontrolleris - DemoController.
  2. Kinnitame atribuudi ng-hide sildile div, mis sisaldab teksti Angular. See on silt, mida kasutame atribuudi ng-show alusel nurgas peitmise kuvamiseks.
  3. Kontrolleris lisame ulatuse objektile liikmemuutuja isVisible. See atribuut edastatakse atribuudile ng-show angular, et juhtida div-juhtelemendi nähtavust. Algselt määrame selle väärtuseks Väär, nii et lehe esmakordsel kuvamisel peidetakse märgend div.
  4. Lisame funktsiooni ShowHide koodi, mis seab IsVisible liikme muutuja väärtuseks Tõene, et kasutajale saaks kuvada märgendit div.

Kui ng show hide kood on edukalt käivitatud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

ng-hide direktiiv AngularJS-is

Väljundist,

  • Esialgu näete, et div-märgend, millel on tekst "AngularJs", kuvatakse algselt, kuna atribuudi väärtus false saadetakse ng-hide direktiivile.
  • Kui klõpsame nupul "Peida nurk", saadetakse ng-hide direktiivile atribuudi väärtus true. Seega kuvatakse allolev väljund, milles peidetakse sõna “Angular”.

ng-hide direktiiv AngularJS-is

AngularJS sündmuste kuulaja direktiivid

Saate lisada oma HTML-i elementidele 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

kokkuvõte

  • Sündmuste direktiive kasutatakse Angularis kohandatud koodi lisamiseks, et reageerida sündmustele, mis on genereeritud kasutaja sekkumise tõttu, nagu nupuklõpsud, klaviatuuri- ja hiireklõpsud jne.
  • Kõige tavalisem sündmuste direktiiv on AngularJS ng-click direktiiv, mida kasutatakse klikisündmuste käsitlemiseks. Kõige sagedamini kasutatakse seda AngluarJS-i nuppude klõpsamiseks, mille puhul saab nupuklõpsule reageerimiseks koodi lisada.
  • HTML-i elemente saab vastavalt peita või kasutajale kuvada, kasutades AngularJS ng-show direktiiv, Angular ng-hide direktiiv ja ng-nähtavad atribuudid.