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

Door: James Hartman James Hartman
Hours Bijgewerkt

⚡ Slimme samenvatting

AngularJS-events stellen een webapplicatie in staat te reageren op gebruikersinvoer zoals muisklikken, toetsaanslagen en hover-acties. Directives zoals ng-click, ng-show en ng-hide koppelen dit gedrag declaratief in de markup in plaats van via handmatige DOM-listeners.

  • ️ Klikken afhandelen: ng-click koppelt een expressie of controllerfunctie aan een element, meestal een knop.
  • 👁️ Voorwaardelijke weergave: ng-show zorgt ervoor dat een element wordt weergegeven wanneer de expressie waar is, terwijl ng-hide het element verwijdert wanneer de expressie waar is.
  • ???? Mechanisme: Beide instructies schakelen de ingebouwde CSS-klasse ng-hide in of uit, waardoor de weergave op 'none' wordt gezet en het element in de DOM blijft.
  • 🔗 Bereikbinding: Een lidvariabele die aan `$scope` is gekoppeld, bepaalt de zichtbaarheid, en het wijzigen ervan binnen een handler werkt de weergave direct bij.
  • 📋 Richtlijnbereik: Achttien luisteraarinstructies hebben betrekking op gebeurtenissen zoals vervagen, wijzigen, focussen, toetsenbord, muis, plakken en verzenden.
  • ⚠️ Ondersteuningsstatus: AngularJS heeft op 31 december 2021 het einde van zijn levenscyclus bereikt, dus nieuwe projecten zouden zich in plaats daarvan op moderne Angular moeten richten.
Meer informatie

AngularJS ng-click ng-show ng-hide richtlijnen

AngularJS-evenementen

AngularJS-evenementen Gebeurtenissen zijn de functionaliteiten waarmee webapplicaties kunnen interageren met gebruikersinvoer, zoals muisklikken, toetsenbordinvoer en muisbewegingen. Gebeurtenissen moeten in webapplicaties worden verwerkt om specifieke taken en acties uit te voeren, en elke gebeurtenis wordt geactiveerd wanneer de gebruiker de bijbehorende actie uitvoert.

Bij het ontwikkelen van webapplicaties moet uw applicatie vroeg of laat DOM-gebeurtenissen verwerken, zoals muisklikken en -bewegingen, toetsaanslagen en wijzigingsgebeurtenissen. angularjs levert richtlijnen die deze gebeurtenissen declaratief afhandelen.

Als er bijvoorbeeld een actie moet worden uitgevoerd op een knop op de pagina wanneer erop wordt geklikt, biedt de ng-click event-directive daarvoor de mogelijkheid.

⚠️ Ondersteuningsbericht: AngularJS bereikte einde levensduur op 31 december 2021 en ontvangt geen verdere patches of beveiligingsupdates meer van het Angular-team. De onderstaande richtlijnen blijven van toepassing voor het onderhouden van bestaande AngularJS 1.x-applicaties; gebruik voor nieuwe projecten de modernere richtlijnen. Angular, waarbij deze richtlijnen worden vervangen door gebeurtenisbindingen zoals (click) en bij *ngIf.

Wat is ng-click-richtlijn in AngularJS?

De “ng-click-richtlijn” In AngularJS wordt aangepast gedrag toegepast wanneer op een HTML-element wordt geklikt. Dit wordt meestal gebruikt voor knoppen, omdat dit de meest gebruikelijke plek is om klikreacties aan te koppelen, en het wordt ook gebruikt om waarschuwingen weer te geven bij een klik.

Syntaxis van ng-klik in AngularJS

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

Voorbeeld van ng-klik in AngularJS

In dit ng-click-voorbeeld wordt een teller-variabele verhoogd telkens wanneer de gebruiker op een knop klikt.

ng-klik op de richtlijn in AngularJS

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

  1. De ng-init-richtlijn stelt de lokale variabele in. count om 0.
  2. De ng-click-richtlijn op de knop verhoogt de waarde. count met 1 bij elke klik.
  3. De interpolatie {{count}} Toont de huidige waarde aan de gebruiker.

Output:

ng-klik in AngularJS

De knop 'Verhogen' wordt weergegeven en de teller staat aanvankelijk op nul. Door erop te klikken wordt de waarde verhoogd, zoals in de onderstaande afbeelding te zien is.

ng-klik in AngularJS

Wat is ng-show-richtlijn in AngularJS?

De ng-show-richtlijn toont of verbergt een bepaalde waarde HTML Het element wordt weergegeven of verborgen op basis van de expressie die is doorgegeven aan het `ng-show` attribuut. Intern wordt het element getoond of verborgen door het verwijderen of toevoegen van de expressie. .ng-hide CSS-klasse, een vooraf gedefinieerde klasse die instelt display naar none.

Syntaxis van ng-show in AngularJS

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

Voorbeeld van ng-show in AngularJS

Dit voorbeeld gebruikt ng-show om een ​​verborgen element zichtbaar te maken.

ng-show-richtlijn in AngularJS

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

  1. De ng-click-richtlijn op de knop verwijst naar een ShowHide functie gedefinieerd in de controller DemoController.
  2. Het ng-show-attribuut is gekoppeld aan de div die de tekst "Angular" bevat. Dit is het element waarvan de zichtbaarheid wordt geregeld.
  3. In de controller, de IsVisible De lidvariabele wordt op het scope-object geplaatst en geïnitialiseerd naar false, waardoor de div verborgen is wanneer de pagina voor het eerst wordt geladen. Met ng-show wordt een waarde van waar geeft het element weer en vals verbergt het.
  4. De ShowHide functiesets IsVisible op 'true' zetten, zodat de div zichtbaar wordt.

Output:

ng-show-richtlijn in AngularJS

De div die de tekst bevat, wordt in eerste instantie niet weergegeven, omdat IsVisible begint als onwaar. Klikken Toon Angular Als het op 'true' wordt gezet, wordt de tekst zichtbaar.

ng-show-richtlijn in AngularJS

GERELATEERDE ARTIKELEN

Wat is ng-hide-richtlijn in AngularJS?

De ng-hide-richtlijn Verbergt een element wanneer de expressie waar is, en toont het element wanneer de expressie onwaar is — precies het tegenovergestelde van ng-show. Intern gebruikt het dezelfde .ng-hide CSS-klasse.

Syntaxis van ng-hide in AngularJS

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

Voorbeeld van ng-hide in AngularJS

Dit voorbeeld is een spiegelbeeld van het ng-show-voorbeeld, waardoor de twee instructies direct met elkaar vergeleken kunnen worden.

ng-hide-richtlijn in AngularJS

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

  1. De ng-click-richtlijn op de knop verwijst naar de ShowHide functie in DemoController.
  2. De ng-verbergen Het attribuut is gekoppeld aan de div die de tekst Angular bevat.
  3. IsVisible wordt geïnitialiseerd naar falseOmdat dit ng-hide is in plaats van ng-show, betekent een false-waarde dat de div verborgen is. zichtbaar wanneer de pagina voor het eerst wordt geladen.
  4. De ShowHide functiesets IsVisible naar true, waardoor de div verborgen wordt.

Output:

ng-hide-richtlijn in AngularJS

De div wordt in eerste instantie weergegeven omdat false wordt doorgegeven aan ng-hide. Klikken Angular verbergen Het woord verdwijnt als het waar is.

ng-hide-richtlijn in AngularJS

ng-show versus ng-hide versus ng-if: belangrijkste verschillen

Drie richtlijnen bepalen of de gebruiker een element ziet, en de keuze daartussen heeft invloed op zowel het gedrag als de weergaveprestaties. De eerste twee schakelen alleen een CSS-klasse in of uit, waardoor het element altijd op de pagina aanwezig is; de derde voegt het element toe en verwijdert het.

Aspect ng-show ng-verbergen ng-if
Element zichtbaar wanneer De uitdrukking klopt. De uitdrukking is onjuist. De uitdrukking klopt.
Element in de DOM Altijd Altijd Alleen zolang het waar is
Gebruikte methode: Toggles .ng-hide class Toggles .ng-hide class Maakt en vernietigt het element.
Kinderkijker Deelt het bereik van de ouder. Deelt het bereik van de ouder. Maakt een nieuw subbereik aan
Wachters wanneer ze verborgen zijn Nog steeds actief Nog steeds actief verwijderd
Best voor Frequent in- en uitschakelen van lichte inhoud Omgekeerde omstandigheden Zware inhoud wordt zelden getoond

Gebruik `ng-show` of `ng-hide` wanneer een element vaak wordt in- of uitgeschakeld, omdat het element dan nooit opnieuw wordt opgebouwd en het inschakelen alleen een wijziging van de klasse kost. Gebruik `ng-if` voor secties die veel aandacht nodig hebben en zelden worden weergegeven, omdat het verwijderen van het element ook de bijbehorende watchers verwijdert en de digest-kosten per cyclus verlaagt.

AngularJS Event Listener-richtlijnen

Je kunt AngularJS-gebeurtenislisteners aan HTML-elementen toevoegen met behulp van een of meer van deze methoden. 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
  • ng-verzenden

Elke instructie accepteert een expressie, en de onbewerkte browsergebeurtenis is daarin beschikbaar als $event wanneer de handler details nodig heeft zoals de ingedrukte toets of de klikcoördinaten.

Veelgestelde vragen

Geef de gereserveerde door $event variabele, zoals in ng-click="handle($event)"De controller ontvangt vervolgens de native gebeurtenis en kan het doel en de coördinaten uitlezen, of preventDefault aanroepen.

ng-repeat maakt per item een ​​child scope aan, waardoor het toewijzen van een primitief type binnen de handler alleen dat child scope bijwerkt. Schrijf naar een objecteigenschap in de parent scope, of gebruik $parent, om de verandering aan de buitenkant zichtbaar te maken.

Gedeeltelijk. AI tools converteren ng-click naar (click) en ng-show naar *ngIf Betrouwbaar, maar scope-afhankelijke logica en tweeweg-bindingen vereisen handmatige controle, omdat AngularJS-scope geen direct equivalent heeft in Angular.

AI-assistenten sporen de gebruikelijke oorzaken snel op: een ontbrekende ng-app, een controllernaam die niet overeenkomt met de module-registratie of een typefout in het directive-attribuut. De voorgestelde oplossing moet nog in de browser worden getest.

Nee. AngularJS biedt alleen ng-show, ng-hide en ng-if. Er is geen ng-visible-richtlijn en het gebruik ervan heeft geen effect, omdat AngularJS onbekende attributen negeert.

Vat dit bericht samen met: