Οδηγία επαναφοράς AngularJS με Παράδειγμα

Πίνακας περιεχομένων:

Anonim

Εμφάνιση επαναλαμβανόμενων πληροφοριών

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

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

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε.

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

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

  1. Στον ελεγκτή, καθορίζουμε πρώτα τη σειρά στοιχείων λίστας που θέλουμε να ορίσουμε στην προβολή. Εδώ έχουμε ορίσει έναν πίνακα που ονομάζεται "TopicNames" που περιέχει τρία στοιχεία. Κάθε στοιχείο αποτελείται από ένα ζεύγος ονόματος-τιμής.
  2. Στη συνέχεια, ο πίνακας των TopicsNames προστίθεται σε μια μεταβλητή μέλους που ονομάζεται "θέματα" και επισυνάπτεται στο αντικείμενο πεδίου μας.
  3. Χρησιμοποιούμε τις ετικέτες HTML των
      (Λίστα χωρίς ταξινόμηση) και
    • (Λίστα στοιχείων) για να εμφανίσουμε τη λίστα των στοιχείων στον πίνακα μας. Στη συνέχεια, χρησιμοποιούμε την οδηγία ng-repeat για να περάσουμε σε κάθε στοιχείο του πίνακα μας. Η λέξη "tpname" είναι μια μεταβλητή που χρησιμοποιείται για να δείχνει σε κάθε στοιχείο στα θέματα του πίνακα.
    • Σε αυτό, θα εμφανίσουμε την τιμή κάθε στοιχείου πίνακα.

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

Παραγωγή:

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

Ένα προηγμένο παράδειγμα ελεγκτή θα ήταν η έννοια της ύπαρξης πολλαπλών ελεγκτών σε μια γωνιακή εφαρμογή JS.

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

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

Event Registration


Guru99 Global Event


{{lname}}

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

  1. Εδώ ορίζουμε 2 ελεγκτές που ονομάζονται "firstController" και "secondController". Για κάθε ελεγκτή προσθέτουμε επίσης κάποιο κώδικα για επεξεργασία. Στο firstController μας, επισυνάπτουμε μια μεταβλητή που ονομάζεται "pname" η οποία έχει την τιμή "firstController" και στο secondController επισυνάπτουμε μια μεταβλητή που ονομάζεται "lname" η οποία έχει την τιμή "secondController".
  2. Στην προβολή, έχουμε πρόσβαση και στους δύο ελεγκτές και χρησιμοποιούμε τη μεταβλητή μέλους από τον δεύτερο ελεγκτή.

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

Παραγωγή:

Περίληψη

  • Η οδηγία ng-repeater μπορεί να χρησιμοποιηθεί για την εμφάνιση πολλαπλών επαναλαμβανόμενων αντικειμένων.
  • Είχαμε επίσης μια ματιά σε έναν προηγμένο ελεγκτή που εξέτασε τον ορισμό των πολλαπλών ελεγκτών σε μια εφαρμογή.