AngularJS ng-click, ng-show & ng-hide richtlijnen met voorbeeld

Door: James Hartman James Hartman
Hours Bijgewerkt

AngularJS-evenementen

AngularJS-evenementen zijn de functionaliteiten waarmee webapplicaties kunnen communiceren met gebruikersinvoer zoals muisklikken, toetsenbordinvoer, muisbeweging, enz. Gebeurtenissen moeten worden afgehandeld in webgebaseerde applicaties om specifieke taken en acties uit te voeren. Het wordt geactiveerd wanneer een specifieke actie door de gebruiker wordt uitgevoerd.

Bij het maken van webgebaseerde applicaties moet uw applicatie vroeg of laat DOM-gebeurtenissen verwerken, zoals muisklikken, bewegingen, toetsaanslagen, wijzigingen, enzovoort.

angularjs kan functionaliteit toevoegen die kan worden gebruikt om dergelijke gebeurtenissen af ​​te handelen.

Als er bijvoorbeeld een knop op de pagina staat en u iets wilt verwerken wanneer op de knop wordt geklikt, kunnen we de Angular ng-click-gebeurtenisrichtlijn gebruiken.

Tijdens deze cursus zullen we de evenementenrichtlijnen in detail bekijken.

Wat is ng-click-richtlijn in AngularJS?

De “ng-click-richtlijn” in AngularJS wordt gebruikt om aangepast gedrag toe te passen wanneer op een element in HTML wordt geklikt. Deze richtlijn wordt normaal gesproken gebruikt voor knoppen, omdat dit de meest gebruikelijke manier is om gebeurtenissen toe te voegen die reageren op klikken die door de gebruiker worden uitgevoerd. Het wordt ook gebruikt om waarschuwingen te laten verschijnen wanneer op een knop wordt geklikt.

Syntaxis van ng-klik in AngularJS

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

Laten we een eenvoudig voorbeeld bekijken van hoe we de klikgebeurtenis kunnen implementeren.

Voorbeeld van ng-klik in AngularJS

In dit ng-click-voorbeeld hebben we een tellervariabele die in waarde toeneemt wanneer de gebruiker op een knop klikt.

ng-klik op de richtlijn in AngularJS
Voorbeeld van ng-klik in 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>

Code Verklaring:

  1. We gebruiken eerst de ng-init-richtlijn om de waarde van het aantal lokale variabelen in te stellen op 0.
  2. Vervolgens introduceren we de ng-click-gebeurtenisrichtlijn voor de knop. In deze richtlijn schrijven we code om de waarde van de count-variabele met 1 te verhogen.
  3. Hier tonen we de waarde van de telvariabele aan de gebruiker.

Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

ng-klik in AngularJS

Uit de bovenstaande uitvoer,

  • We zien dat de knop “Increment” wordt weergegeven en dat de waarde van de telvariabele aanvankelijk nul is.
  • Wanneer u op de knop Verhogen klikt, wordt de waarde van de telling dienovereenkomstig verhoogd, zoals weergegeven in de onderstaande uitvoerafbeelding.

ng-klik in AngularJS

GERELATEERDE ARTIKELEN

Wat is ng-show-richtlijn in AngularJS?

De ng-Show-richtlijn in AngularJS wordt gebruikt om een ​​bepaald specifiek item te tonen of te verbergen HTML element gebaseerd op de expressie die is opgegeven voor het ng-show attribuut. Op de achtergrond wordt het HTML-element weergegeven of verborgen door de CSS-klasse .ng-hide aan het element te verwijderen of toe te voegen. Het is een vooraf gedefinieerde CSS-klasse die de weergave op nul instelt.

Syntaxis van ng-show in AngularJS

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

Op de achtergrond wordt het element weergegeven of verborgen door de CSS-klasse .ng-hide aan het element te verwijderen of toe te voegen.

Voorbeeld van ng-show in AngularJS

Laten we eens kijken naar een ng-show in Angular. Voorbeeld van hoe we de “ngshow event” -richtlijn kunnen gebruiken om een ​​verborgen element weer te geven.

ng-show-richtlijn in AngularJS

Voorbeeld van ng-show in Angular
<!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>

Code Verklaring:

  1. We voegen de gebeurtenisrichtlijn ng-click toe aan het knopelement. Hier verwijzen we naar een functie genaamd “ShowHide” die is gedefinieerd in onze controller – DemoController.
  2. We koppelen het ng-show attribuut aan een div-tag die de tekst Angular bevat. Dit is de tag die we gaan tonen/verbergen op basis van het ng-show attribuut.
  3. In de controller koppelen we de lidvariabele "IsVisible" aan het scope-object. Dit kenmerk wordt doorgegeven aan het ng-show angular-kenmerk (stap #2) om de zichtbaarheid van het div-besturingselement te regelen. We stellen dit aanvankelijk in op false, zodat de div-tag verborgen is wanneer de pagina voor het eerst wordt weergegeven. Opmerking: - Wanneer de attributen ng-show zijn ingesteld op true, wordt het volgende besturingselement, in ons geval de div-tag, aan de gebruiker getoond. Wanneer het ng-show attribuut is ingesteld op false, wordt het besturingselement verborgen voor de gebruiker.
  4. We voegen code toe aan de ShowHide-functie die de IsVisible-lidvariabele op true zet, zodat de AngularJS show hide div on click-tag aan de gebruiker kan worden getoond.

Als de code voor ng-show en ng-hide in AngularJS succesvol wordt uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output: 1

ng-show-richtlijn in AngularJS

Van de uitvoer,

  • Je kunt in eerste instantie zien dat de div-tag met de tekst “AngularJS” niet wordt weergegeven en dit komt omdat het scope-object isVisible aanvankelijk is ingesteld op false, wat vervolgens wordt doorgegeven aan de ng-show-instructie van de div-tag.
  • Wanneer u op de knop “AngularJS weergeven” klikt, wordt de lidvariabele isVisible gewijzigd in waar, waardoor de tekst “Angular” zichtbaar wordt voor de gebruiker. De onderstaande uitvoer wordt aan de gebruiker getoond.

ng-show-richtlijn in AngularJS

De uitvoer toont nu de div-tag met de hoekige tekst.

Wat is ng-hide-richtlijn in AngularJS?

De ng-hide-richtlijn in AngularJS is een functie waarmee een element verborgen wordt als de expressie TRUE is. Als de expressie FALSE is, wordt het element weergegeven. Op de achtergrond wordt het element weergegeven of verborgen door de CSS-klasse .ng-hide aan het element te verwijderen of toe te voegen.

Syntaxis van ng-hide in AngularJS

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

Aan de andere kant wordt met ng-hide het element verborgen als de expressie waar is en wordt het weergegeven als het onwaar is.

Voorbeeld van ng-hide in AngularJS

Laten we eens kijken naar het vergelijkbare ng-hide-voorbeeld als dat voor ngShow om te laten zien hoe de kenmerken ng-hide en ng-show kunnen worden gebruikt.

ng-hide-richtlijn in AngularJS

Voorbeeld van ng-hide in 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>

Code Verklaring:

  1. We voegen de gebeurtenisrichtlijn ng-click toe aan het knopelement. Hier verwijzen we naar een functie genaamd ShowHide die is gedefinieerd in onze controller – DemoController.
  2. We koppelen het ng-hide attribuut aan een div-tag die de tekst Angular bevat. Dit is de tag die we zullen gebruiken om hide in Angular te tonen op basis van het ng-show attribuut.
  3. In de controller koppelen we de isVisible-lidvariabele aan het scope-object. Dit kenmerk wordt doorgegeven aan het ng-show angular-kenmerk om de zichtbaarheid van het div-besturingselement te regelen. We stellen dit aanvankelijk in op false, zodat de div-tag verborgen is wanneer de pagina voor het eerst wordt weergegeven.
  4. We voegen code toe aan de functie ShowHide die de lidvariabele IsVisible op true zet, zodat de div-tag aan de gebruiker kan worden getoond.

Als de code voor ng show hide succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

ng-hide-richtlijn in AngularJS

Van de uitvoer,

  • Je kunt in eerste instantie zien dat de div-tag met de tekst “AngularJs” in eerste instantie wordt weergegeven omdat de eigenschapswaarde false naar de ng-hide-richtlijn wordt verzonden.
  • Wanneer we op de knop "Hide Angular" klikken, wordt de eigenschapswaarde van true naar de ng-hide-richtlijn verzonden. Daarom wordt de onderstaande uitvoer getoond, waarin het woord "Angular" verborgen is.

ng-hide-richtlijn in AngularJS

AngularJS Event Listener-richtlijnen

U kunt AngularJS-gebeurtenislisteners aan uw HTML-elementen toevoegen door een of meer hiervan te gebruiken richtlijnen:

  • ng-vervagen
  • ng-verandering
  • ng-klik
  • ng-kopie
  • ng-gesneden
  • ng-dblclick
  • ng-focus
  • ng-toets omlaag
  • ng-toetsaanslag
  • ng-keyup
  • ng-muisknop
  • ng-mouseenter
  • ng-muisblad
  • ng-muisbeweging
  • ng-mouseover
  • ng-muis
  • ng-pasta

Samenvatting

  • Gebeurtenisrichtlijnen worden in Angular gebruikt om aangepaste code toe te voegen om te reageren op gebeurtenissen die worden gegenereerd door gebruikersinterventie, zoals klikken op knoppen, toetsenbord- en muisklikken, enz.
  • De meest voorkomende gebeurtenisrichtlijn is de AngularJS ng-click-richtlijn die wordt gebruikt om klikgebeurtenissen af ​​te handelen. Het meest voorkomende gebruik hiervan is het klikken op AngluarJS-knoppen, waarbij code kan worden toegevoegd om te reageren op een knopklik.
  • HTML-elementen kunnen ook dienovereenkomstig worden verborgen of aan de gebruiker worden getoond door gebruik te maken van de AngularJS ng-show-richtlijn, Hoekige ng-hide richtlijn en ng-zichtbare attributen.

Je houdt misschien van: