Direttive AngularJS ng-click, ng-show e ng-hide con esempio
James Hartmann
Eventi AngularJS
Eventi AngularJS sono le funzionalità che consentono alle applicazioni Web di interagire con gli input dell'utente come clic del mouse, input da tastiera, passaggio del mouse, ecc. Gli eventi devono essere gestiti in applicazioni basate sul Web per eseguire attività e azioni specifiche. Viene attivato quando un'azione specifica viene eseguita dall'utente.
Quando si creano applicazioni basate sul Web, prima o poi l'applicazione dovrà gestire eventi DOM come clic del mouse, spostamenti, pressioni della tastiera, eventi di modifica, ecc.
AngularJS può aggiungere funzionalità che possono essere utilizzate per gestire tali eventi.
Ad esempio, se è presente un pulsante sulla pagina e desideri elaborare qualcosa quando si fa clic sul pulsante, possiamo utilizzare la direttiva evento Angular ng-click.
Durante questo corso esamineremo in dettaglio le direttive sugli eventi.
Cos'è la direttiva ng-click in AngularJS?
“direttiva ng-click” in AngularJS viene utilizzato per applicare un comportamento personalizzato quando si fa clic su un elemento in HTML. Questa direttiva viene normalmente utilizzata per i pulsanti perché è la modalità più comune per aggiungere eventi che rispondono ai clic eseguiti dall'utente. Viene utilizzato anche per visualizzare avvisi quando si fa clic su un pulsante.
Sintassi di ng-click in AngularJS
<element ng-click="expression"> </element>
Diamo un'occhiata ad un semplice esempio di come possiamo implementare l'evento click.
Esempio di ng-click in AngularJS
In questo esempio di ng-click, avremo una variabile contatore che aumenterà di valore quando l'utente fa clic su un pulsante.
<!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>
Spiegazione del codice:
- Per prima cosa utilizziamo la direttiva ng-init per impostare il valore di una variabile locale count su 0.
- Stiamo quindi introducendo la direttiva evento ng-click nel pulsante. In questa direttiva stiamo scrivendo il codice per incrementare il valore della variabile count di 1.
- Qui stiamo visualizzando il valore della variabile count all'utente.
Se il codice viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Dall'output sopra,
- Possiamo vedere che viene visualizzato il pulsante “Incrementa” e il valore della variabile di conteggio è inizialmente zero.
- Quando si fa clic sul pulsante Incremento, il valore del conteggio viene incrementato di conseguenza, come mostrato nell'immagine di output di seguito.
Cos'è la direttiva ng-show in AngularJS?
Direttiva ng-Show in AngularJS viene utilizzato per mostrare o nascondere un dato specifico HTML elemento basato sull'espressione fornita all'attributo ng-show. In background, l'elemento HTML viene mostrato o nascosto rimuovendo o aggiungendo la classe CSS .ng-hide all'elemento. È una classe CSS predefinita che imposta la visualizzazione su nessuno.
Sintassi di ng-show in AngularJS
<element ng-show="expression"> </element>
Sullo sfondo, l'elemento viene mostrato o nascosto rimuovendo o aggiungendo la classe CSS .ng-hide all'elemento.
Esempio di ng-show in AngularJS
Diamo un'occhiata a un ng-show in Angular Esempio di come possiamo utilizzare la direttiva "ngshow event" per visualizzare un elemento nascosto.
<!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>
Spiegazione del codice:
- Stiamo allegando la direttiva evento ng-click all'elemento button. Qui facciamo riferimento a una funzione chiamata “ShowHide” che è definita nel nostro controller – DemoController.
- Alleghiamo l'attributo ng-show a un tag div che contiene il testo Angular. Questo è il tag che mostreremo/nasconderemo in base all'attributo ng-show.
- Nel controller, alleghiamo la variabile membro "IsVisible" all'oggetto scope. Questo attributo verrà passato all'attributo angolare ng-show (passaggio n. 2) per controllare la visibilità del controllo div. Inizialmente lo impostiamo su false in modo che quando la pagina viene visualizzata per la prima volta il tag div sarà nascosto. Nota: - Quando l'attributo ng-show è impostato su true, il controllo successivo che nel nostro caso è il tag div verrà mostrato all'utente. Quando l'attributo ng-show è impostato su false il controllo verrà nascosto all'utente.
- Stiamo aggiungendo codice alla funzione ShowHide che imposterà la variabile membro IsVisible su true in modo che il div show hide di AngularJS sul clicktag possa essere mostrato all'utente.
Se il codice per ng-show e ng-hide in AngularJS viene eseguito correttamente, quando esegui il codice nel browser verrà visualizzato il seguente output.
Uscita: 1
Dall'uscita,
- Inizialmente puoi vedere che il tag div che ha il testo "AngularJS" non viene mostrato e questo perché l'oggetto scope isVisible è inizialmente impostato su false che viene poi successivamente passato alla direttiva ng-show del tag div.
- Quando si fa clic sul pulsante "Mostra AngularJS", la variabile membro isVisible diventa true e quindi il testo "Angular" diventa visibile all'utente. L'output seguente verrà mostrato all'utente.
L'output ora mostra il tag div con il testo Angular.
Cos'è la direttiva ng-hide in AngularJS?
direttiva ng-hide in AngularJS è una funzione utilizzando la quale un elemento verrà nascosto se l'espressione è TRUE. Se l'espressione è FALSE, l'elemento verrà mostrato. Sullo sfondo, l'elemento viene mostrato o nascosto rimuovendo o aggiungendo la classe CSS .ng-hide all'elemento.
Sintassi di ng-hide in AngularJS
<element ng-hide="expression"> </element>
D'altra parte con ng-hide, l'elemento è nascosto se l'espressione è vera e verrà mostrato se è falsa.
Esempio di ng-hide in AngularJS
Diamo un'occhiata all'esempio ng-hide simile a quello mostrato per ngShow per mostrare come possono essere utilizzati gli attributi ng-hide e ng-show.
<!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>
Spiegazione del codice:
- Stiamo allegando la direttiva evento ng-click all'elemento button. Qui facciamo riferimento a una funzione chiamata ShowHide che è definita nel nostro controller – DemoController.
- Alleghiamo l'attributo ng-hide a un tag div che contiene il testo Angular. Questo è il tag che useremo per mostrare hide in Angular in base all'attributo ng-show.
- Nel controller, alleghiamo la variabile membro isVisible all'oggetto scope. Questo attributo verrà passato all'attributo angolare ng-show per controllare la visibilità del controllo div. Inizialmente lo impostiamo su false in modo che quando la pagina viene visualizzata per la prima volta il tag div sarà nascosto.
- Stiamo aggiungendo codice alla funzione ShowHide che imposterà la variabile membro IsVisible su true in modo che il tag div possa essere mostrato all'utente.
Se il codice per ng show hide viene eseguito correttamente, quando esegui il codice nel browser verrà visualizzato il seguente Output.
Produzione:
Dall'uscita,
- Inizialmente puoi vedere che il tag div che contiene il testo "AngularJs" viene inizialmente mostrato perché il valore della proprietà false viene inviato alla direttiva ng-hide.
- Quando facciamo clic sul pulsante "Hide Angular", il valore della proprietà true verrà inviato alla direttiva ng-hide. Quindi verrà mostrato l'output seguente, in cui la parola "Angular" sarà nascosta.
Direttive del listener di eventi AngularJS
Puoi aggiungere ascoltatori di eventi AngularJS ai tuoi elementi HTML utilizzando uno o più di questi direttive:
- ng-sfocatura
- ng-cambiamento
- ng-clic
- ng-copia
- ng-cut
- ng-dblclick
- ng-focus
- ng-keydown
- ng-pressione dei tasti
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-paste
Sommario
- Le direttive sugli eventi vengono utilizzate in Angular per aggiungere codice personalizzato per rispondere agli eventi generati dall'intervento dell'utente come clic sui pulsanti, clic sulla tastiera e sul mouse, ecc.
- La direttiva evento più comune è la direttiva AngularJS ng-click che viene utilizzata per gestire gli eventi clic. L'uso più comune di questo è per il clic sui pulsanti AngluarJS in cui è possibile aggiungere codice per rispondere al clic di un pulsante.
- Gli elementi HTML possono anche essere nascosti o mostrati all'utente di conseguenza utilizzando il file Direttiva ng-show di AngularJS, Direttiva angolare ng-hide e attributi ng-visible.
