Οι πίνακες είναι ένα από τα κοινά στοιχεία που χρησιμοποιούνται στο HTML κατά την εργασία με ιστοσελίδες.
Οι πίνακες σε HTML σχεδιάζονται χρησιμοποιώντας την ετικέτα HTML
tag - Αυτή είναι η κύρια ετικέτα που χρησιμοποιείται για την εμφάνιση του πίνακα.
- Αυτή η ετικέτα χρησιμοποιείται για το διαχωρισμό των γραμμών εντός του πίνακα.
- Αυτή η ετικέτα χρησιμοποιείται για την εμφάνιση των πραγματικών δεδομένων πίνακα.
- Χρησιμοποιείται για τα δεδομένα κεφαλίδας πίνακα.
Χρησιμοποιώντας τις παραπάνω διαθέσιμες ετικέτες HTML μαζί με το AngularJS, μπορούμε να διευκολύνουμε τη συμπλήρωση δεδομένων πίνακα. Εν ολίγοις, η οδηγία ng-repeat χρησιμοποιείται για τη συμπλήρωση δεδομένων πίνακα.
Θα εξετάσουμε πώς θα το επιτύχουμε αυτό το κεφάλαιο. Θα δούμε επίσης πώς μπορούμε να χρησιμοποιήσουμε τα φίλτρα παραγγελίας και κεφαλαίων μαζί με τη χρήση του χαρακτηριστικού $ index για την εμφάνιση ευρετηρίων γωνιακού πίνακα
Σε αυτό το σεμινάριο, θα μάθετε-
Συμπλήρωση & εμφάνιση δεδομένων σε έναν πίνακα
Ενσωματωμένο φίλτρο AngularJS
Ταξινόμηση πίνακα με φίλτρο OrderBy
Εμφάνιση πίνακα με κεφαλαίο φίλτρο
Εμφάνιση του ευρετηρίου πίνακα (δείκτης $)
Συμπλήρωση & εμφάνιση δεδομένων σε έναν πίνακα
Όπως συζητήσαμε στην εισαγωγή αυτού του κεφαλαίου, η βάση για τη δημιουργία της δομής του πίνακα σε μια σελίδα HTML παραμένει η ίδια.
Η δομή του πίνακα εξακολουθεί να δημιουργείται χρησιμοποιώντας τις κανονικές ετικέτες HTML των
,
,
και
. Ωστόσο, τα δεδομένα συμπληρώνονται χρησιμοποιώντας την οδηγία ng-repeat στο AngularJS.
Ας δούμε ένα απλό παράδειγμα για το πώς μπορούμε να εφαρμόσουμε γωνιακούς πίνακες.
Σε αυτό το παράδειγμα,
Θα δημιουργήσουμε έναν γωνιακό πίνακα που θα έχει θέματα μαθήματος μαζί με τις περιγραφές τους.
Βήμα 1) Πρώτα θα προσθέσουμε μια ετικέτα "style" στη σελίδα HTML, έτσι ώστε ο πίνακας να μπορεί να εμφανίζεται ως κατάλληλος πίνακας.
Η ετικέτα στυλ προστίθεται στη σελίδα HTML. Αυτός είναι ο τυπικός τρόπος για να προσθέσετε τυχόν χαρακτηριστικά μορφοποίησης που απαιτούνται για στοιχεία HTML.
Προσθέτουμε δύο τιμές στυλ στο τραπέζι μας.
Το ένα είναι ότι πρέπει να υπάρχει ένα σταθερό περίγραμμα για το γωνιακό μας τραπέζι και
Δεύτερον είναι ότι πρέπει να τοποθετηθούν padding για τα δεδομένα του Angular table.
Βήμα 2) Το επόμενο βήμα είναι να γράψετε τον κώδικα για να δημιουργήσετε τον πίνακα και τα δεδομένα του.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Επεξήγηση κώδικα:
Αρχικά δημιουργούμε μια μεταβλητή που ονομάζεται "φροντιστήριο" και της εκχωρούμε μερικά ζεύγη κλειδιών-τιμών σε ένα βήμα. Κάθε ζεύγος κλειδιού-τιμής θα χρησιμοποιηθεί ως δεδομένα κατά την εμφάνιση του πίνακα. Στη συνέχεια, η μεταβλητή εκμάθησης αντιστοιχίζεται στο αντικείμενο εύρους έτσι ώστε να είναι προσβάσιμη από την άποψή μας.
Αυτό είναι το πρώτο βήμα για τη δημιουργία ενός πίνακα και χρησιμοποιούμε την ετικέτα
.
Για κάθε σειρά δεδομένων, χρησιμοποιούμε την "οδηγία ng-repeat". Αυτή η οδηγία περνά από κάθε ζεύγος κλειδιού-τιμής στο tuto, rial εύρος αντικειμένου χρησιμοποιώντας τη μεταβλητή ptutor.
Τέλος, χρησιμοποιούμε την ετικέτα
μαζί με τα ζεύγη τιμών-κλειδιών (ptutor.Name και ptutor.Description) για να εμφανίσουμε τα δεδομένα γωνιακού πίνακα.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την παραπάνω έξοδο,
Μπορούμε να δούμε ότι ο πίνακας εμφανίζεται σωστά με τα δεδομένα από τη σειρά ζευγών κλειδιών-τιμών που ορίζονται στον ελεγκτή.
Τα δεδομένα πίνακα δημιουργήθηκαν με τη μετάβαση σε καθένα από τα ζεύγη κλειδιού-τιμής χρησιμοποιώντας την "οδηγία ng-repeat".
Ενσωματωμένο φίλτρο AngularJS
Είναι πολύ συνηθισμένο να χρησιμοποιείτε τα ενσωματωμένα φίλτρα στο AngularJS για να αλλάξετε τον τρόπο εμφάνισης των δεδομένων στους πίνακες. Έχουμε ήδη δει φίλτρα σε δράση σε ένα προηγούμενο κεφάλαιο. Ας έχουμε μια γρήγορη ανακεφαλαίωση των φίλτρων προτού προχωρήσουμε.
Στο Angular.JS χρησιμοποιούνται φίλτρα για τη μορφοποίηση της τιμής της έκφρασης πριν εμφανιστεί στον χρήστη. Ένα παράδειγμα φίλτρου είναι το φίλτρο «κεφαλαίων» που λαμβάνει μια έξοδο συμβολοσειράς και μορφοποιεί τη συμβολοσειρά και εμφανίζει όλους τους χαρακτήρες στη συμβολοσειρά ως κεφαλαία.
Έτσι στο παρακάτω παράδειγμα, εάν η τιμή της μεταβλητής «TutorialName» είναι «AngularJS», η έξοδος της παρακάτω έκφρασης θα είναι «ANGULARJS».
{{TurotialName | κεφαλαία}}
Σε αυτήν την ενότητα, θα δούμε πώς μπορούν να χρησιμοποιηθούν τα φίλτρα κατά παραγγελία και κεφαλαία σε πίνακες με περισσότερες λεπτομέρειες.
Ταξινόμηση πίνακα με φίλτρο OrderBy
Αυτό το φίλτρο χρησιμοποιείται για την ταξινόμηση του πίνακα με βάση μία από τις στήλες του πίνακα. Στο προηγούμενο παράδειγμα, η έξοδος για τα δεδομένα γωνιακού πίνακα εμφανίστηκε όπως φαίνεται παρακάτω.
Ελεγκτές
Ελεγκτές σε δράση
Μοντέλα
Μοντέλα και δεσμευτικά δεδομένα
Οδηγίες
Ευελιξία οδηγιών
Ας δούμε ένα παράδειγμα, για το πώς μπορούμε να χρησιμοποιήσουμε το φίλτρο "orderBy" και να ταξινομήσουμε τα δεδομένα του γωνιακού πίνακα χρησιμοποιώντας την πρώτη στήλη στον πίνακα.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Επεξήγηση κώδικα:
Χρησιμοποιούμε τον ίδιο κωδικό όπως και για τη δημιουργία του πίνακα μας, η μόνη διαφορά αυτή τη φορά είναι ότι χρησιμοποιούμε το φίλτρο "orderBy" μαζί με την οδηγία ng-repeat. Σε αυτήν την περίπτωση, λέμε ότι θέλουμε να παραγγείλουμε τον πίνακα με το κλειδί "Όνομα".
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
Μπορούμε να δούμε ότι τα δεδομένα στον πίνακα Γωνιακό έχουν ταξινομηθεί σύμφωνα με τα δεδομένα στην πρώτη στήλη. Στο σύνολο δεδομένων μας, τα δεδομένα "Οδηγίες" προέρχονται από τα δεδομένα "Μοντέλα", αλλά επειδή εφαρμόσαμε το φίλτρο OrderBy, οι πίνακες ταξινομούνται ανάλογα.
Εμφάνιση πίνακα με κεφαλαίο φίλτρο
Μπορούμε επίσης να χρησιμοποιήσουμε το κεφαλαίο φίλτρο για να αλλάξουμε τα δεδομένα στον γωνιακό πίνακα σε κεφαλαία.
Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε αυτό.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Επεξήγηση κώδικα:
Χρησιμοποιούμε τον ίδιο κώδικα όπως και για τη δημιουργία του πίνακα μας, η μόνη διαφορά αυτή τη φορά είναι ότι χρησιμοποιούμε το κεφαλαίο φίλτρο. Χρησιμοποιούμε αυτό το φίλτρο σε συνδυασμό με το "ptutor.Name" έτσι ώστε όλο το κείμενο στην πρώτη στήλη να εμφανίζεται με κεφαλαία γράμματα.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
Μπορούμε να δούμε ότι χρησιμοποιώντας το φίλτρο "κεφαλαία", όλα τα δεδομένα στην πρώτη στήλη εμφανίζονται με κεφαλαίους χαρακτήρες.
Εμφάνιση του ευρετηρίου πίνακα (δείκτης $)
Για να εμφανίσετε τον πίνακα ευρετηρίου, προσθέστε ένα
με $ index.
Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε αυτό.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Επεξήγηση κώδικα:
Χρησιμοποιούμε τον ίδιο κωδικό όπως κάναμε για τη δημιουργία του πίνακα μας, η μόνη διαφορά αυτή τη φορά είναι ότι προσθέτουμε μια επιπλέον σειρά στον πίνακα μας για να εμφανιστεί η στήλη ευρετηρίου.
Σε αυτήν την επιπλέον στήλη, χρησιμοποιούμε την ιδιότητα "$ index" που παρέχεται από το AngularJS και στη συνέχεια χρησιμοποιούμε τον τελεστή +1 για να αυξήσουμε το ευρετήριο για κάθε σειρά.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την έξοδο,
Μπορείτε να δείτε ότι έχει δημιουργηθεί μια επιπλέον στήλη. Σε αυτήν τη στήλη, μπορούμε να δούμε τα ευρετήρια που δημιουργούνται για κάθε σειρά.
Περίληψη:
Οι δομές πινάκων δημιουργούνται χρησιμοποιώντας τις τυπικές ετικέτες που είναι διαθέσιμες σε HTML. Τα δεδομένα στον πίνακα συμπληρώνονται χρησιμοποιώντας την οδηγία "ng-repeat".
Το φίλτρο OrderBy μπορεί να χρησιμοποιηθεί για την ταξινόμηση του πίνακα με βάση οποιαδήποτε στήλη στον πίνακα.
Το κεφαλαίο φίλτρο μπορεί να χρησιμοποιηθεί για την προβολή των δεδομένων σε οποιαδήποτε στήλη που βασίζεται σε κείμενο με κεφαλαία γράμματα.
Η ιδιότητα "$ index" μπορεί να χρησιμοποιηθεί για τη δημιουργία ευρετηρίου για τον πίνακα.
Ένα κοινό πρόβλημα που αντιμετωπίστηκε κατά την ανάπτυξη με τους πίνακες AngularJS.JS είναι η υλοποίηση μεγάλων συνόλων δεδομένων που έχει 1000+ σειρές δεδομένων. Μερικές φορές η οδηγία ng-repeat μπορεί να μην ανταποκρίνεται, και ως εκ τούτου ολόκληρη η σελίδα αποκρίνεται μερικές φορές. Σε μια τέτοια περίπτωση, είναι πάντα καλύτερο να υπάρχει σελιδοποίηση στην οποία οι σειρές δεδομένων κατανέμονται σε πολλές σελίδες.
