Οδηγίες ng-click, ng-show & ng-hide AngularJS

⚡ Έξυπνη Σύνοψη

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

🖱️ Χειρισμός κλικ: Το ng-click συνδέει μια έκφραση ή μια συνάρτηση ελεγκτή σε ένα στοιχείο, συνήθως ένα κουμπί.
👁️ Εμφάνιση υπό όρους: Η συνάρτηση ng-show αποδίδει ένα στοιχείο όταν η έκφρασή του είναι αληθής, ενώ η συνάρτηση ng-hide το αφαιρεί όταν η έκφραση είναι αληθής.
🎨 Μηχανισμός: Και οι δύο οδηγίες εναλλάσσουν την ενσωματωμένη κλάση ng-hide CSS, η οποία ορίζει την τιμή display σε none, επομένως το στοιχείο παραμένει στο DOM.
🔗 Σύνδεση πεδίου εφαρμογής: Μια μεταβλητή-μέλος που τοποθετείται στο $scope αυξάνει την ορατότητα και η αλλαγή της μέσα σε έναν χειριστή ενημερώνει αμέσως την προβολή.
📋 Εύρος Κατευθυντήριων Γραμμών: Δεκαοκτώ οδηγίες ακροατή καλύπτουν συμβάντα θολώματος, αλλαγής, εστίασης, πληκτρολογίου, ποντικιού, επικόλλησης και υποβολής.
⚠️ Κατάσταση υποστήριξης: Το AngularJS έφτασε στο τέλος της ζωής του στις 31 Δεκεμβρίου 2021, επομένως τα νέα έργα θα πρέπει να στοχεύουν στο σύγχρονο Angular.

Περισσότερα

Εκδηλώσεις AngularJS

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

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

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

⚠️ Ειδοποίηση υποστήριξης: Το AngularJS έφτασε τέλος ζωής στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις κώδικα ή διορθώσεις ασφαλείας από την ομάδα Angular. Οι παρακάτω οδηγίες παραμένουν ακριβείς για τη διατήρηση υπαρχουσών εφαρμογών AngularJS 1.x. Για νέες εργασίες, χρησιμοποιήστε σύγχρονες Γωνιώδης, όπου αυτές οι οδηγίες αντικαθίστανται από συνδέσεις συμβάντων όπως (click) και με *ngIf.

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

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

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

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

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

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

<!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 Επεξήγηση:

Η οδηγία ng-init ορίζει την τοπική μεταβλητή count να 0.
Η οδηγία ng-click στα βήματα του κουμπιού count κατά 1 σε κάθε κλικ.
Η παρεμβολή {{count}} εμφανίζει την τρέχουσα τιμή στον χρήστη.

Παραγωγή:

Εμφανίζεται το κουμπί Αύξηση και η μέτρηση είναι αρχικά μηδέν. Κάνοντας κλικ σε αυτό, η τιμή αυξάνεται, όπως φαίνεται στην παρακάτω εικόνα.

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

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

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

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

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

Αυτό το παράδειγμα χρησιμοποιεί την εντολή ng-show για να αποκαλύψει ένα κρυφό στοιχείο.

<!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 Επεξήγηση:

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

Παραγωγή:

Το div που περιέχει το κείμενο δεν εμφανίζεται αρχικά, επειδή IsVisible ξεκινά ως ψευδές. Κάνοντας κλικ Εμφάνιση Angular το ορίζει σε true και το κείμενο γίνεται ορατό.

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

The οδηγία ng-hide αποκρύπτει ένα στοιχείο όταν η έκφρασή του αξιολογείται ως TRUE και εμφανίζει το στοιχείο όταν η έκφραση είναι FALSE — το ακριβές αντίστροφο του ng-show. Εσωτερικά χρησιμοποιεί το ίδιο .ng-hide Κατηγορία CSS.

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

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

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

Αυτό το παράδειγμα αντικατοπτρίζει το παράδειγμα ng-show, επομένως οι δύο οδηγίες μπορούν να συγκριθούν απευθείας.

<!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 Επεξήγηση:

Η οδηγία ng-click στο κουμπί αναφέρεται στο ShowHide λειτουργία στο DemoController.
The ng-hide Το χαρακτηριστικό είναι συνδεδεμένο στο div που περιέχει το κείμενο Angular.
IsVisible αρχικοποιείται σε falseΕπειδή αυτό είναι ng-hide αντί για ng-show, μια ψευδής τιμή σημαίνει ότι το div είναι ορατός όταν φορτώνει για πρώτη φορά η σελίδα.
The ShowHide σύνολα συναρτήσεων IsVisible σε true, το οποίο αποκρύπτει το div.

Παραγωγή:

Το div εμφανίζεται αρχικά επειδή η συνάρτηση false περνάει στην συνάρτηση ng-hide. Κάνοντας κλικ Απόκρυψη γωνιακής περνάει η τιμή αληθής και η λέξη εξαφανίζεται.

ng-show vs ng-hide vs ng-if: Βασικές διαφορές

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

Άποψη	ng-show	ng-hide	ng-if
Στοιχείο ορατό όταν	Η έκφραση είναι αληθής	Η έκφραση είναι ψευδής	Η έκφραση είναι αληθής
Στοιχείο στο DOM	Πάντοτε	Πάντοτε	Μόνο όσο είναι αληθινό
Μέθοδος που χρησιμοποιήθηκε	Toggles .ng-hide κλάση	Toggles .ng-hide κλάση	Δημιουργεί και καταστρέφει το στοιχείο
Θυγατρικό πεδίο εφαρμογής	Μοιράζεται το γονικό πεδίο εφαρμογής	Μοιράζεται το γονικό πεδίο εφαρμογής	Δημιουργεί ένα νέο θυγατρικό πεδίο εφαρμογής
Παρατηρητές όταν είναι κρυμμένοι	Ακόμα ενεργός	Ακόμα ενεργός	Καταργήθηκε
καλυτερα for	Συχνή εναλλαγή φωτεινού περιεχομένου	Ανεστραμμένες συνθήκες	Σπάνια εμφανίζεται βαρύ περιεχόμενο

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

Οδηγίες 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
ng-υποβολή

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

Συχνές Ερωτήσεις

Περάστε το κρατημένο $event μεταβλητή, όπως στο ng-click="handle($event)"Στη συνέχεια, ο ελεγκτής λαμβάνει το εγγενές συμβάν και μπορεί να διαβάσει τον στόχο, τις συντεταγμένες ή να καλέσει την εντολή preventDefault.

Η ng-repeat δημιουργεί ένα θυγατρικό πεδίο εφαρμογής ανά στοιχείο, επομένως η ανάθεση ενός αρχικού στοιχείου μέσα στον χειριστή ενημερώνει μόνο αυτό το θυγατρικό στοιχείο. Γράψτε σε μια ιδιότητα αντικειμένου στο γονικό πεδίο εφαρμογής ή χρησιμοποιήστε $parent, για να γίνει η αλλαγή ορατή εξωτερικά.

Εν μέρει. AI εργαλεία μετατροπής ng-click σε (click) και ng-show σε *ngIf αξιόπιστα, αλλά η λογική που εξαρτάται από το πεδίο εφαρμογής και οι αμφίδρομες συνδέσεις χρειάζονται χειροκίνητη αναθεώρηση, επειδή το πεδίο εφαρμογής του AngularJS δεν έχει άμεσο Angular ισοδύναμο.

Οι βοηθοί τεχνητής νοημοσύνης εντοπίζουν γρήγορα τις συνήθεις αιτίες: μια ελλείπουσα εφαρμογή ng, ένα όνομα ελεγκτή που δεν ταιριάζει με την εγγραφή της ενότητας ή ένα τυπογραφικό λάθος στο χαρακτηριστικό directive. Η προτεινόμενη διόρθωση χρειάζεται ακόμη δοκιμή στο πρόγραμμα περιήγησης.

Όχι. Το AngularJS παρέχει μόνο τις ng-show, ng-hide και ng-if. Δεν υπάρχει οδηγία ng-visible και η αναφορά σε μία δεν παράγει κανένα αποτέλεσμα επειδή το AngularJS αγνοεί μη αναγνωρισμένα χαρακτηριστικά.

Οδηγίες ng-click, ng-show & ng-hide AngularJS

Εκδηλώσεις 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

ng-show vs ng-hide vs ng-if: Βασικές διαφορές

Οδηγίες AngularJS Event Liner

Συχνές Ερωτήσεις

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο

Εκδηλώσεις 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

ng-show vs ng-hide vs ng-if: Βασικές διαφορές

Οδηγίες AngularJS Event Liner

Συχνές Ερωτήσεις

Συνοψίστε αυτήν την ανάρτηση με:

Εγγραφείτε στο ενημερωτικό δελτίο