AngularJS ng-klicka, ng-visa & ng-dölj direktiv med exempel

AngularJS-evenemang

AngularJS-evenemang är de funktioner som gör att webbapplikationer kan interagera med användarinmatningar som musklick, tangentbordsinmatningar, muspekande etc. Händelser måste hanteras i webbaserade applikationer för att kunna utföra specifika uppgifter och åtgärder. Den utlöses när en specifik åtgärd utförs av användaren.

När du skapar webbaserade applikationer kommer din applikation förr eller senare att behöva hantera DOM-händelser som musklick, rörelser, tangentbordstryckningar, ändringshändelser, etc.

AngularJS kan lägga till funktionalitet som kan användas för att hantera sådana händelser.

Till exempel, om det finns en knapp på sidan och du vill bearbeta något när knappen klickas, kan vi använda Angular ng-click-händelsedirektivet.

Vi kommer att undersöka evenemangsdirektiven i detalj under den här kursen.

Vad är ng-click-direktiv i AngularJS?

Smakämnen "ng-klick direktiv" i AngularJS används för att tillämpa anpassat beteende när ett element i HTML klickas. Detta direktiv används normalt för knappar eftersom det är det vanligaste för att lägga till händelser som svarar på klick utförda av användaren. Den används också för att popup-varningar när en knapp klickas.

Syntax för ng-klick i AngularJS

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

Låt oss titta på ett enkelt exempel på hur vi kan implementera klickhändelsen.

Exempel på ng-klick i AngularJS

I detta ng-klick-exempel kommer vi att ha en räknarvariabel som ökar i värde när användaren klickar på en knapp.

ng-klicka på Direktiv i AngularJS — Exempel på ng klick i 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>

Kodförklaring:

Vi använder först direktivet ng-init för att ställa in värdet på en lokal variabelräkning till 0.
Vi introducerar sedan ng-click-händelsedirektivet till knappen. I det här direktivet skriver vi kod för att öka värdet på räknevariabeln med 1.
Här visar vi värdet på räknevariabeln för användaren.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Från ovanstående utgång,

Vi kan se att knappen "Inkrement" visas och värdet på räknevariabeln initialt är noll.
När du klickar på knappen Öka, ökas värdet på räkningen i enlighet med det som visas i utdatabilden nedan.

Vad är ng-show direktiv i AngularJS?

Smakämnen ng-Show direktiv i AngularJS används för att visa eller dölja en given specifik html element baserat på uttrycket som tillhandahålls för ng-show-attributet. I bakgrunden visas eller döljs HTML-elementet genom att ta bort eller lägga till CSS-klassen .ng-hide i elementet. Det är en fördefinierad CSS-klass som ställer in displayen till ingen.

Syntax för ng-show i AngularJS

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

I bakgrunden visas eller döljs elementet genom att ta bort eller lägga till CSS-klassen .ng-hide i elementet.

Exempel på ng-show i AngularJS

Låt oss titta på en ng-show i Angular Exempel på hur vi kan använda "ngshow event"-direktivet för att visa ett dolt element.

ng-show Direktiv i AngularJS — Exempel på ng show i 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>

Kodförklaring:

Vi bifogar ng-click-händelsedirektivet till knappelementet. Här hänvisar vi till en funktion som heter "ShowHide" som är definierad i vår styrenhet - DemoController.
Vi bifogar attributet ng-show till en div-tagg som innehåller texten Angular. Detta är taggen som vi kommer att visa/dölja baserat på ng-show-attributet.
I kontrollern bifogar vi medlemsvariabeln "IsVisible" till scope-objektet. Detta attribut kommer att skickas till ng-show vinkelattributet (steg #2) för att kontrollera synligheten för div-kontrollen. Vi ställer initialt in detta på false så att div-taggen döljs när sidan först visas. Observera: - När attributen ng-show är satt till true, kommer den efterföljande kontrollen som i vårt fall är div-taggen att visas för användaren. När ng-show-attributet är inställt på false kommer kontrollen att döljas för användaren.
Vi lägger till kod till ShowHide-funktionen som kommer att ställa in IsVisible-medlemsvariabeln till true så att AngularJS show hide div on click-taggen kan visas för användaren.

Om koden för ng-show och ng-hide i AngularJS exekveras framgångsrikt, kommer följande utdata att visas när du kör din kod i webbläsaren.

Utgång: 1

Från utgången,

Du kan initialt se att div-taggen som har texten "AngularJS" inte visas och detta beror på att isVisible scope-objektet initialt är inställt på false som sedan skickas till ng-show-direktivet för div-taggen.
När du klickar på knappen "Visa AngularJS" ändras medlemsvariabeln isVisible så att den blir sann och därför blir texten "Angular" synlig för användaren. Utdata nedan kommer att visas för användaren.

Utdatan visar nu div-taggen med Angular-texten.

Vad är ng-hide-direktivet i AngularJS?

Smakämnen ng-hide direktiv i AngularJS är en funktion som använder vilken ett element kommer att döljas om uttrycket är TRUE. Om uttrycket är FALSK kommer elementet att visas. I bakgrunden visas eller döljs elementet genom att ta bort eller lägga till CSS-klassen .ng-hide i elementet.

Syntax för ng-hide i AngularJS

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

Å andra sidan med ng-hide döljs elementet om uttrycket är sant och det kommer att visas om det är falskt.

Exempel på ng-hide i AngularJS

Låt oss titta på det liknande ng-hide-exemplet som det som visas för ngShow för att visa hur attributen ng-hide och ng-show kan användas.

ng-hide-direktivet i AngularJS — Exempel på ng-hide i 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>

Kodförklaring:

Vi bifogar ng-click-händelsedirektivet till knappelementet. Här hänvisar vi till en funktion som heter ShowHide som är definierad i vår kontroller – DemoController.
Vi bifogar ng-hide-attributet till en div-tagg som innehåller texten Angular. Det här är taggen som vi kommer att använda för att visa hide i Angular baserat på ng-show-attributet.
I kontrollern bifogar vi medlemsvariabeln isVisible till scope-objektet. Detta attribut kommer att skickas till ng-show vinkelattributet för att kontrollera synligheten för div-kontrollen. Vi ställer initialt in detta på false så att div-taggen döljs när sidan först visas.
Vi lägger till kod till ShowHide-funktionen som kommer att ställa in IsVisible-medlemsvariabeln till true så att div-taggen kan visas för användaren.

Om koden för ng show hide körs framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion:

Från utgången,

Du kan initialt se att div-taggen som har texten "AngularJs" initialt visas eftersom egenskapsvärdet för false skickas till ng-hide-direktivet.
När vi klickar på "Göm vinkel"-knappen skickas egenskapsvärdet true till ng-hide-direktivet. Följaktligen kommer utgången nedan att visas, där ordet "Angular" kommer att döljas.

AngularJS Händelselyssnardirektiv

Du kan lägga till AngularJS-händelselyssnare till dina HTML-element genom att använda en eller flera av dessa direktiv:

ng-oskärpa
ng-förändring
ng-klicka
ng-kopia
ng-snitt
ng-dblklick
ng-fokus
ng-tangenten
ng-tangenttryckning
ng-tangenten
ng-mousedown
ng-mouseenter
ng-musblad
ng-mousemove
ng-mus över
ng-mouseup
ng-klistra

Sammanfattning

Händelsedirektiv används i Angular för att lägga till anpassad kod för att svara på händelser som genereras av användaringripanden såsom knappklick, tangentbords- och musklick, etc.
Det vanligaste händelsedirektivet är AngularJS ng-click-direktivet som används för att hantera klickhändelser. Den vanligaste användningen av detta är för AngluarJS-knappklick där kod kan läggas till för att svara på ett knappklick.
HTML-element kan också döljas eller visas för användaren i enlighet med detta genom att använda AngularJS ng-show direktiv, Angular ng-hide Direktiv och ng-synliga attribut.

Du kanske gillar:

AngularJS-evenemang

Vad är ng-click-direktiv i AngularJS?

Syntax för ng-klick i AngularJS

Exempel på ng-klick i AngularJS

RELATERADE ARTIKLAR

Vad är ng-show direktiv i AngularJS?

Syntax för ng-show i AngularJS

Exempel på ng-show i AngularJS

Vad är ng-hide-direktivet i AngularJS?

Syntax för ng-hide i AngularJS

Exempel på ng-hide i AngularJS

AngularJS Händelselyssnardirektiv

Sammanfattning