AngularJS -007 - ng-repeat: Δημιουργώντας δυναμικές λίστες δεδομένων

AngularJS ng-repeat: Δημιούργησε δυναμικές λίστες!

Στα προηγούμενα μαθήματα γνωρίσαμε τα Modules, τους Controllers, το Data Binding, τα Events και τα Filters.

Σήμερα θα γνωρίσουμε ένα από τα πιο χρήσιμα directives του AngularJS: το ng-repeat. Με αυτό μπορούμε να εμφανίζουμε αυτόματα επαναλαμβανόμενα στοιχεία στην ιστοσελίδα μας!

1. Τι είναι το ng-repeat;

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

Για παράδειγμα, αν έχουμε έναν πίνακα με πέντε βιβλία, το AngularJS μπορεί να δημιουργήσει αυτόματα πέντε αντίστοιχα στοιχεία HTML.

2. Δημιουργούμε έναν πίνακα δεδομένων

Αρχικά, στον Controller δημιουργούμε έναν πίνακα με αντικείμενα. Κάθε αντικείμενο περιέχει πληροφορίες για ένα βιβλίο.

$scope.books = [
  {
    title: 'Το ταξίδι',
    author: 'Νίκος Παπαδόπουλος'
  },
  {
    title: 'Μικρές διαδρομές',
    author: 'Μαρία Ιωάννου'
  }
];

Κάθε βιβλίο είναι ένα αντικείμενο με τις ιδιότητες title και author.

3. Χρησιμοποιούμε το ng-repeat

Για να εμφανίσουμε τα βιβλία μας, γράφουμε το παρακάτω:

<div ng-repeat="book in books">
  <h3>{{ book.title }}</h3>
  <p>{{ book.author }}</p>
</div>

Ας εξηγήσουμε τι σημαίνει η έκφραση book in books:

• books: είναι ο πίνακας δεδομένων.
• book: είναι το κάθε αντικείμενο του πίνακα.
• ng-repeat: επαναλαμβάνει το HTML στοιχείο για κάθε αντικείμενο.

4. Πρόσβαση στις ιδιότητες κάθε αντικειμένου

Μέσα στο στοιχείο που επαναλαμβάνεται, μπορούμε να χρησιμοποιήσουμε τις ιδιότητες του τρέχοντος αντικειμένου.

{{ book.title }}
{{ book.author }}
{{ book.rating }}

Το AngularJS γνωρίζει σε ποιο αντικείμενο αναφερόμαστε σε κάθε επανάληψη.

5. Πάμε να πειραματιστούμε!

Στο παρακάτω παράδειγμα θα εμφανίσουμε μια λίστα βιβλίων με τίτλο, συγγραφέα και βαθμολογία. Τα δεδομένα βρίσκονται στον Controller και παρουσιάζονται αυτόματα με το ng-repeat.

6. Τι πρέπει να θυμάσαι

• Το ng-repeat δημιουργεί επαναλαμβανόμενα HTML στοιχεία.
• Χρησιμοποιείται για την εμφάνιση δεδομένων από πίνακες.
• Μπορούμε να εμφανίζουμε τις ιδιότητες κάθε αντικειμένου.
• Όταν προσθέτουμε νέα δεδομένα στον πίνακα, η λίστα ενημερώνεται αυτόματα.

7. Μικρή πρόκληση!

Τώρα δοκίμασε να επεκτείνεις τη λίστα:

1. Πρόσθεσε ένα ακόμη βιβλίο στον πίνακα.
2. Πρόσθεσε μια νέα ιδιότητα με το έτος έκδοσης.
3. Εμφάνισε το έτος έκδοσης στην κάρτα κάθε βιβλίου.
4. Πρόσθεσε δύο ακόμη βιβλία με διαφορετικές βαθμολογίες.

8. Ολοκληρώσαμε το AngularJS Beginner!

Συγχαρητήρια! Έφτασες στο τέλος της πρώτης σειράς μαθημάτων AngularJS Beginner του Jerry's CodeLab.

Σε αυτή την ενότητα γνώρισες τα βασικά εργαλεία του AngularJS 1.x και έκανες τα πρώτα σου βήματα στη δημιουργία δυναμικών ιστοσελίδων.

Το επόμενο βήμα είναι να αξιοποιήσεις όσα έμαθες και να προχωρήσεις σε πιο σύνθετες εφαρμογές!

Jerry's CodeLab — LEARN · EXPERIMENT · CREATE