Οδηγία AngularJS ng-repeat με Παράδειγμα

Με: Τζέιμς Χάρτμαν Τζέιμς Χάρτμαν
Hours Ενημερώθηκε

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

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

  • 🔁 Βασική Συμπεριφορά: Η ng-repeat κλωνοποιεί το στοιχείο host της μία φορά ανά στοιχείο, επομένως η οδηγία ανήκει στο στοιχείο που επαναλαμβάνεται και όχι στο περιέκτη του.
  • 🏷️ Μεταβλητή βρόχου: Το όνομα πριν από τη λέξη στο γίνεται ένα τοπικό ψευδώνυμο για το τρέχον στοιχείο μέσα σε αυτόν τον κλώνο.
  • 🧬 Θυγατρικό πεδίο εφαρμογής: Κάθε επανάληψη λαμβάνει το δικό της θυγατρικό πεδίο εφαρμογής, γι' αυτό και η ανάθεση ενός αρχικού στοιχείου μέσα στον βρόχο δεν φτάνει στον γονέα.
  • 🔑 Ταυτότητα Tracking: A tracΤο k by expression λέει στο AngularJS πώς να αναγνωρίζει στοιχεία και απαιτείται όταν μια συλλογή περιέχει επαναλαμβανόμενες τιμές.
  • 🔢 Ενσωματωμένα Τοπικά: Ιδιότητες όπως $index, $first και $last είναι διαθέσιμες μέσα σε κάθε επανάληψη για αρίθμηση και μορφοποίηση.
  • ⚠️ Κατάσταση υποστήριξης: Το AngularJS έφτασε στο τέλος της διάρκειας ζωής του στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις ασφαλείας.
Περισσότερα

Οδηγία AngularJS ng-repeat

ng-repeat Directive στο AngularJS

The ng-επανάληψη Οδηγιών Στο AngularJS χρησιμοποιείται για την εμφάνιση επαναλαμβανόμενων τιμών που ορίζονται στον ελεγκτή. Μερικές φορές χρειάζεται να εμφανίσουμε μια λίστα στοιχείων στην προβολή και η συνάρτηση ng-repeat εμφανίζει μια λίστα που ορίζεται στον ελεγκτή σε μια σελίδα προβολής.

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

Παράδειγμα οδηγίας AngularJS ng-repeat

Ας δούμε ένα παράδειγμα της οδηγίας ng-repeat στο AngularJS:

ng-repeat Directive στο AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Επεξήγηση:

  1. Στο ελεγκτής, ορίζουμε πρώτα τον πίνακα των στοιχείων λίστας που θα εμφανίζονται στην προβολή. Εδώ ένας πίνακας που ονομάζεται TopicNames περιέχει τρία στοιχεία, το καθένα από τα οποία είναι ένα ζεύγος ονόματος-τιμής.
  2. Ο πίνακας έχει εκχωρηθεί απευθείας σε $scope.TopicNames, το οποίο το καθιστά διαθέσιμο στην προβολή που είναι συνδεδεμένη με αυτόν τον ελεγκτή.
  3. Οι ετικέτες HTML <ul> (μη ταξινομημένη λίστα) και <li> (στοιχείο λίστας) εμφανίζει τα στοιχεία. Η οδηγία ng-repeat επαναλαμβάνεται σε κάθε καταχώρηση στον πίνακα και tpname είναι η τοπική μεταβλητή που περιέχει το τρέχον στοιχείο, επομένως {{tpname.name}} εκτυπώνει την ιδιότητα name της.

⚠️ Διόρθωση: η αρχική εξήγηση ανέφερε ότι ο πίνακας «προστέθηκε σε μια μεταβλητή-μέλος που ονομάζεται topics«. Δεν υπάρχει τέτοια μεταβλητή στον κώδικα — ο πίνακας έχει εκχωρηθεί απευθείας σε $scope.TopicNames, το οποίο είναι το όνομα στο οποίο αναφέρεται η προβολή. Η εισαγωγή ενός δεύτερου ονόματος εδώ είναι μια συνηθισμένη αιτία μιας κενής λίστας.

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

ng-repeat Directive στο AngularJS

Πολλαπλοί ελεγκτές AngularJS

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

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

Πολλαπλοί ελεγκτές AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code Επεξήγηση:

  1. Ορίζονται δύο ελεγκτές, firstcontroller και secondcontrollerΚάθε ένα συνδέει μια μεταβλητή με το δικό του έκταση: pname στο πρώτο, lname στο δεύτερο.
  2. Στην προβολή, ο δεύτερος ελεγκτής είναι ενσωματωμένος μέσα στον πρώτο και η έκφραση διαβάζεται lname από το εσωτερικό πεδίο εφαρμογής. Επειδή ένας ένθετος ελεγκτής κληρονομεί από τον γονικό του, {{pname}} θα επιλυόταν επίσης εδώ — η κληρονομιά ρέει προς τα κάτω, ποτέ προς τα πάνω.

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

Πολλαπλοί ελεγκτές AngularJS

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

Πώς να το χρησιμοποιήσετε: track από με ng-repeat

Η πιο συνηθισμένη αποτυχία επανάληψης ng είναι το σφάλμα Duplicates in a repeater are not allowedΕμφανίζεται τη στιγμή που μια συλλογή περιέχει την ίδια τιμή δύο φορές και σταματά εντελώς την απόδοση της λίστας.

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

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- καλυτερα for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

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

Tracking από ένα γνήσιο αναγνωριστικό όπως topic.id αποφεύγει εντελώς αυτό. Το AngularJS μπορεί να ακολουθεί κάθε εγγραφή καθώς κινείται, επομένως αναδιατάσσει τους υπάρχοντες κόμβους αντί να τους καταστρέφει και να τους ξαναχτίζει. Σε μεγάλες λίστες αυτό είναι επίσης σημαντικά πιο γρήγορο, καθώς μια επαναφορά αγγίζει μόνο τις γραμμές που άλλαξαν πραγματικά. Χρησιμοποιήστε $index μόνο για πίνακες απλών τιμών που δεν αναδιατάσσονται ποτέ.

Ειδικά Ακίνητα Διαθέσιμα Μέσα στο ng-repeat

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

Ιδιοκτησία Χαρακτηριστικά αξία
$index αριθμός Θέση του τρέχοντος στοιχείου, ξεκινώντας από το 0
$first Boolean Ισχύει μόνο για το πρώτο στοιχείο
$last Boolean Ισχύει μόνο για το τελευταίο στοιχείο
$middle Boolean Ισχύει για κάθε στοιχείο που δεν είναι ούτε πρώτο ούτε τελευταίο
$even Boolean Αληθές όταν το $index είναι άρτιο
$odd Boolean Αληθές όταν το $index είναι περιττό

Μια τυπική χρήση τους συνδυάζει με την κλάση ng για το zebra stri.ping, όπως λέμε ng-class="{'row-alt': $odd}", ή με ng-if για να εμφανίσετε ένα διαχωριστικό σε κάθε γραμμή εκτός από την τελευταία, γραμμένο ng-if="!$last"Η εμφάνιση ενός αριθμού γραμμής αναγνώσιμου από τον άνθρωπο είναι απλή {{$index + 1}}, καθώς ο δείκτης βασίζεται στο μηδέν. Και οι έξι ιδιότητες επανυπολογίζονται αυτόματα κάθε φορά που αλλάζει η συλλογή, επομένως δεν χρειάζεται να επανυπολογιστεί τίποτα χειροκίνητα.

Συνηθισμένα σφάλματα ng-repeat και πώς να τα διορθώσετε

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

  • Δεν επιτρέπονται διπλότυπα σε έναν επαναλήπτη: η συλλογή έχει μια επαναλαμβανόμενη αξία. Προσθέστε track by $index, ή καλύτερα, track by μια μοναδική ιδιοκτησία.
  • Η λίστα δεν αποδίδει τίποτα: Το όνομα στην προβολή δεν ταιριάζει με την ιδιότητα στο πεδίο εφαρμογής. Εκτυπώστε τη συλλογή με {{TopicNames}} για να επιβεβαιώσει ότι έφτασε.
  • Κάθε στοιχείο επαναλαμβάνεται, συμπεριλαμβανομένου του περιτυλίγματος: Το ng-repeat τοποθετήθηκε στο κοντέινερ και όχι στο αντικείμενο. Μετακινήστε το στο <li> or <tr>.
  • Η επεξεργασία μιας καταχώρησης αλλάζει τη λάθος σειρά: η λίστα είναι tracυπό την επίβλεψη $index ενώ τα αντικείμενα αναδιατάσσονται. Track από ένα σταθερό αναγνωριστικό αντ' αυτού.
  • Οι αλλαγές εντός του βρόχου δεν παραμένουν: Κάθε επανάληψη έχει το δικό της θυγατρικό πεδίο εφαρμογής, επομένως η εγγραφή σε ένα πρωτεύον στοιχείο δημιουργεί ένα τοπικό αντίγραφο. Η εγγραφή σε μια ιδιότητα αντικειμένου, όπως π.χ. item.done.

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

Ναι, χρησιμοποιώντας ng-repeat="(key, value) in myObject"Σημειώστε ότι το AngularJS επαναλαμβάνει τα κλειδιά αντικειμένων με ταξινομημένη σειρά και όχι με σειρά εισαγωγής, επομένως ένας πίνακας είναι ασφαλέστερος όταν η ακολουθία έχει σημασία.

Φίλτρα αλυσίδας στην έκφραση, όπως στο ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Ο αρχικός πίνακας παραμένει ανέπαφος. Μόνο η σειρά και το υποσύνολο που αποδίδονται αλλάζουν.

Ναί. AI εργαλεία αντιστοίχισης ng-repeat σε *ngFor και track από έως tracΣυναρτήσεις kBy. Ελέγξτε προσεκτικά τα φίλτρα, επειδή η Angular σκόπιμα απέσυρε το ενσωματωμένο φίλτρο και τις διοχετεύσεις orderBy.

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

Χρησιμοποιήστε τη φόρμα σχολίων, ng-repeat-start και ng-repeat-end, το οποίο επαναλαμβάνει μια σειρά από αδελφά στοιχεία. Αυτό έχει σημασία σε πίνακες, όπου ένα επιπλέον div θα έσπαγε την μορφοποίηση.

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