Οδηγίες ng-click, ng-show & ng-hide AngularJS με παράδειγμα

Εκδηλώσεις AngularJS

Εκδηλώσεις AngularJS είναι οι λειτουργίες που επιτρέπουν στις εφαρμογές Ιστού να αλληλεπιδρούν με τις εισόδους των χρηστών, όπως κλικ του ποντικιού, είσοδοι πληκτρολογίου, τοποθέτηση του ποντικιού κ.λπ. Τα συμβάντα πρέπει να αντιμετωπίζονται σε εφαρμογές που βασίζονται στον ιστό προκειμένου να εκτελούνται συγκεκριμένες εργασίες και ενέργειες. Ενεργοποιείται όταν εκτελείται μια συγκεκριμένη ενέργεια από τον χρήστη.

Κατά τη δημιουργία εφαρμογών που βασίζονται στον ιστό, αργά ή γρήγορα η εφαρμογή σας θα πρέπει να χειρίζεται συμβάντα DOM όπως κλικ του ποντικιού, κινήσεις, πατήματα πληκτρολογίου, αλλαγές συμβάντων κ.λπ.

AngularJS μπορεί να προσθέσει λειτουργικότητα που μπορεί να χρησιμοποιηθεί για το χειρισμό τέτοιων συμβάντων.

Για παράδειγμα, εάν υπάρχει ένα κουμπί στη σελίδα και θέλετε να επεξεργαστείτε κάτι όταν κάνετε κλικ στο κουμπί, μπορούμε να χρησιμοποιήσουμε την οδηγία συμβάντος Angular ng-click.

Θα εξετάσουμε λεπτομερώς τις οδηγίες για τα συμβάντα κατά τη διάρκεια αυτού του μαθήματος.

Τι είναι η Οδηγία ng-click στο AngularJS;

The "Οδηγία ng-click" στο AngularJS χρησιμοποιείται για την εφαρμογή προσαρμοσμένης συμπεριφοράς όταν γίνεται κλικ σε ένα στοιχείο σε HTML. Αυτή η οδηγία χρησιμοποιείται συνήθως για κουμπιά, επειδή είναι η πιο συνηθισμένη για την προσθήκη συμβάντων που ανταποκρίνονται στα κλικ που εκτελούνται από τον χρήστη. Χρησιμοποιείται επίσης για αναδυόμενες ειδοποιήσεις όταν γίνεται κλικ σε ένα κουμπί.

Σύνταξη του ng-click στο AngularJS

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

Ας δούμε ένα απλό παράδειγμα για το πώς μπορούμε να υλοποιήσουμε το συμβάν κλικ.

Παράδειγμα ng-click στο AngularJS

Σε αυτό το Παράδειγμα ng-click, θα έχουμε μια μεταβλητή μετρητή που θα αυξάνεται σε τιμή όταν ο χρήστης κάνει κλικ σε ένα κουμπί.

ng-click Directive στο AngularJS — Παράδειγμα ng κλικ στο 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>

Επεξήγηση κώδικα:

Χρησιμοποιούμε πρώτα την οδηγία ng-init για να ορίσουμε την τιμή μιας τοπικής μεταβλητής μέτρησης στο 0.
Στη συνέχεια, εισάγουμε την οδηγία συμβάντος ng-click στο κουμπί. Σε αυτήν την οδηγία, γράφουμε κώδικα για να αυξήσουμε την τιμή της μεταβλητής count κατά 1.
Εδώ εμφανίζουμε την τιμή της μεταβλητής count στον χρήστη.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Από την παραπάνω έξοδο,

Μπορούμε να δούμε ότι εμφανίζεται το κουμπί "Increment" και η τιμή της μεταβλητής count είναι αρχικά μηδέν.
Όταν κάνετε κλικ στο κουμπί Αύξηση, η τιμή της μέτρησης αυξάνεται ανάλογα, όπως φαίνεται στην παρακάτω εικόνα εξόδου.

Τι είναι η οδηγία ng-show στο AngularJS;

The ng-Εμφάνιση οδηγίας στο AngularJS χρησιμοποιείται για την εμφάνιση ή την απόκρυψη ενός δεδομένου συγκεκριμένου HTML στοιχείο που βασίζεται στην έκφραση που παρέχεται στο χαρακτηριστικό ng-show. Στο παρασκήνιο, το στοιχείο HTML εμφανίζεται ή αποκρύπτεται αφαιρώντας ή προσθέτοντας την κλάση CSS .ng-hide στο στοιχείο. Είναι μια προκαθορισμένη κλάση CSS που ορίζει την εμφάνιση σε καμία.

Σύνταξη του ng-show στο AngularJS

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

Στο παρασκήνιο, το στοιχείο εμφανίζεται ή αποκρύπτεται αφαιρώντας ή προσθέτοντας την κλάση CSS .ng-hide στο στοιχείο.

Παράδειγμα ng-show στο AngularJS

Ας δούμε ένα ng-show στο Angular Παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε την οδηγία "ngshow event" για να εμφανίσουμε ένα κρυφό στοιχείο.

Οδηγία ng-show στο AngularJS — Παράδειγμα εμφάνισης ng σε 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>

Επεξήγηση κώδικα:

Επισυνάπτουμε την οδηγία συμβάντος ng-click στο στοιχείο του κουμπιού. Εδώ αναφερόμαστε σε μια συνάρτηση που ονομάζεται "ShowHide" που ορίζεται στον ελεγκτή μας - DemoController.
Επισυνάπτουμε το χαρακτηριστικό ng-show σε μια ετικέτα div που περιέχει το κείμενο Angular. Αυτή είναι η ετικέτα που πρόκειται να εμφανίσουμε/κρύψουμε με βάση το χαρακτηριστικό ng-show.
Στον ελεγκτή, συνδέουμε τη μεταβλητή μέλους "IsVisible" στο αντικείμενο scope. Αυτό το χαρακτηριστικό θα μεταβιβαστεί στο χαρακτηριστικό ng-show angular (βήμα # 2) για τον έλεγχο της ορατότητας του στοιχείου ελέγχου div. Αρχικά το ρυθμίζουμε σε false, έτσι ώστε όταν εμφανίζεται για πρώτη φορά η σελίδα, η ετικέτα div θα είναι κρυφή. Σημείωση: - Όταν τα χαρακτηριστικά ng-show οριστεί σε true, το επόμενο στοιχείο ελέγχου που στην περίπτωσή μας είναι η ετικέτα div θα εμφανιστεί στον χρήστη. Όταν το χαρακτηριστικό ng-show έχει οριστεί σε false, το στοιχείο ελέγχου θα είναι κρυφό από το χρήστη.
Προσθέτουμε κώδικα στη συνάρτηση ShowHide η οποία θα ορίσει τη μεταβλητή μέλους IsVisible σε true, έτσι ώστε η ετικέτα AngularJS show hide div στην ετικέτα κλικ να μπορεί να εμφανιστεί στον χρήστη.

Εάν ο κώδικας για το ng-show και το ng-hide στο AngularJS εκτελεστεί με επιτυχία, η ακόλουθη Έξοδος θα εμφανιστεί όταν εκτελείτε τον κώδικά σας στο πρόγραμμα περιήγησης.

Έξοδος: 1

Από την έξοδο,

Μπορείτε αρχικά να δείτε ότι η ετικέτα div που έχει το κείμενο "AngularJS" δεν εμφανίζεται και αυτό συμβαίνει επειδή το αντικείμενο πεδίου isVisible έχει οριστεί αρχικά σε false, το οποίο στη συνέχεια μεταβιβάζεται στην οδηγία ng-show της ετικέτας div.
Όταν κάνετε κλικ στο κουμπί "Εμφάνιση AngularJS", αλλάζει η μεταβλητή μέλους isVisible ώστε να γίνει αληθινή και ως εκ τούτου το κείμενο "Angular" γίνεται ορατό στον χρήστη. Η παρακάτω έξοδος θα εμφανιστεί στον χρήστη.

Η έξοδος δείχνει τώρα την ετικέτα div με το Angular κείμενο.

Τι είναι η οδηγία ng-hide στο AngularJS;

The οδηγία ng-hide στο AngularJS είναι μια συνάρτηση με την οποία ένα στοιχείο θα κρυφτεί εάν η έκφραση είναι TRUE. Εάν η Έκφραση είναι FALSE, θα εμφανιστεί το στοιχείο. Στο παρασκήνιο, το στοιχείο εμφανίζεται ή αποκρύπτεται αφαιρώντας ή προσθέτοντας την κλάση CSS .ng-hide στο στοιχείο.

Σύνταξη του ng-hide στο AngularJS

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

Από την άλλη με το ng-hide, το στοιχείο κρύβεται εάν η έκφραση είναι αληθής και θα εμφανίζεται αν είναι ψευδής.

Παράδειγμα ng-hide στο AngularJS

Ας δούμε το παρόμοιο Παράδειγμα ng-hide με αυτό που εμφανίζεται για το ngShow για να δείξουμε πώς μπορούν να χρησιμοποιηθούν τα χαρακτηριστικά ng-hide και ng-show.

Οδηγία ng-hide στο AngularJS — Παράδειγμα ng-hide στο 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>

Επεξήγηση κώδικα:

Επισυνάπτουμε την οδηγία συμβάντος ng-click στο στοιχείο του κουμπιού. Εδώ αναφερόμαστε σε μια συνάρτηση που ονομάζεται ShowHide, η οποία ορίζεται στον ελεγκτή μας - DemoController.
Επισυνάπτουμε το χαρακτηριστικό ng-hide σε μια ετικέτα div που περιέχει το κείμενο Angular. Αυτή είναι η ετικέτα, την οποία θα χρησιμοποιήσουμε για να εμφανίσουμε την απόκρυψη στο Angular με βάση το χαρακτηριστικό ng-show.
Στον ελεγκτή, συνδέουμε τη μεταβλητή μέλους isVisible στο αντικείμενο scope. Αυτό το χαρακτηριστικό θα μεταβιβαστεί στο χαρακτηριστικό ng-show angular για τον έλεγχο της ορατότητας του στοιχείου ελέγχου div. Αρχικά το ρυθμίζουμε σε false, έτσι ώστε όταν εμφανίζεται για πρώτη φορά η σελίδα, η ετικέτα div θα είναι κρυφή.
Προσθέτουμε κώδικα στη συνάρτηση ShowHide που θα ορίσει τη μεταβλητή μέλους IsVisible σε true, έτσι ώστε η ετικέτα div να μπορεί να εμφανιστεί στον χρήστη.

Εάν ο κώδικας για το ng show hide εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κώδικά σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Από την έξοδο,

Μπορείτε αρχικά να δείτε ότι η ετικέτα div που έχει το κείμενο "AngularJs" εμφανίζεται αρχικά επειδή η τιμή της ιδιότητας false αποστέλλεται στην οδηγία ng-hide.
Όταν κάνουμε κλικ στο κουμπί "Απόκρυψη γωνιακής" η τιμή της ιδιότητας του true θα σταλεί στην οδηγία ng-hide. Ως εκ τούτου, θα εμφανιστεί η παρακάτω έξοδος, στην οποία θα κρύβεται η λέξη "Angular".

Οδηγίες AngularJS Event Liner

Μπορείτε να προσθέσετε προγράμματα ακρόασης συμβάντων AngularJS στα στοιχεία HTML σας χρησιμοποιώντας ένα ή περισσότερα από αυτά οδηγιών:

ng-blur
ng-αλλαγή
ng-κλικ
ng-αντίγραφο
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-πλήκτρο
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

Σύνοψη

Οι οδηγίες συμβάντων χρησιμοποιούνται στο Angular για την προσθήκη προσαρμοσμένου κώδικα για την απόκριση σε συμβάντα που δημιουργούνται από παρέμβαση χρήστη, όπως κλικ κουμπιών, κλικ πληκτρολογίου και ποντικιού κ.λπ.
Η πιο κοινή οδηγία συμβάντων είναι η οδηγία ng-click AngularJS που χρησιμοποιείται για τη διαχείριση συμβάντων κλικ. Η πιο κοινή χρήση αυτού είναι για κλικ κουμπιών AgluarJS όπου μπορεί να προστεθεί κώδικας για να ανταποκριθεί σε ένα κλικ κουμπιού.
Τα στοιχεία HTML μπορούν επίσης να κρυφτούν ή να εμφανιστούν στον χρήστη ανάλογα με τη χρήση του Οδηγία AngularJS ng-show, Γωνιακή οδηγία ng-hide και χαρακτηριστικά ng-visible.

Μπορεί να σας αρέσει:

Εκδηλώσεις AngularJS

Τι είναι η Οδηγία ng-click στο AngularJS;

Σύνταξη του ng-click στο AngularJS

Παράδειγμα ng-click στο AngularJS

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

Τι είναι η οδηγία ng-show στο AngularJS;

Σύνταξη του ng-show στο AngularJS

Παράδειγμα ng-show στο AngularJS

Τι είναι η οδηγία ng-hide στο AngularJS;

Σύνταξη του ng-hide στο AngularJS

Παράδειγμα ng-hide στο AngularJS

Οδηγίες AngularJS Event Liner

Σύνοψη