Πίνακας AngularJS: Ταξινόμηση, OrderBy και κεφαλαία φίλτρα [Παραδείγματα]

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

Οι πίνακες είναι ένα από τα κοινά στοιχεία που χρησιμοποιούνται στην HTML κατά την εργασία με ιστοσελίδες.

Οι πίνακες σε HTML σχεδιάζονται χρησιμοποιώντας την ετικέτα HTML

  1. ετικέτα – Αυτή είναι η κύρια ετικέτα που χρησιμοποιείται για την εμφάνιση του πίνακα.
  2. – Αυτή η ετικέτα χρησιμοποιείται για τον διαχωρισμό των γραμμών μέσα στον πίνακα.
  3. – Αυτή η ετικέτα χρησιμοποιείται για την εμφάνιση των πραγματικών δεδομένων πίνακα.
  4. – Χρησιμοποιείται για τα δεδομένα κεφαλίδας πίνακα.

Χρησιμοποιώντας τις παραπάνω διαθέσιμες ετικέτες HTML μαζί με AngularJS, μπορούμε να διευκολύνουμε τη συμπλήρωση δεδομένων πίνακα. Εν ολίγοις, η οδηγία ng-repeat χρησιμοποιείται για τη συμπλήρωση δεδομένων πίνακα.

Θα εξετάσουμε πώς να το πετύχουμε αυτό κατά τη διάρκεια αυτού του κεφαλαίου. Θα εξετάσουμε επίσης πώς μπορούμε να χρησιμοποιήσουμε τα φίλτρα orderby και κεφαλαία γράμματα μαζί με τη χρήση του χαρακτηριστικού $index για την εμφάνιση ευρετηρίων Angular πίνακα.

Συμπλήρωση και εμφάνιση δεδομένων σε έναν πίνακα

Όπως συζητήσαμε στην εισαγωγή αυτού του κεφαλαίου, η βάση για τη δημιουργία της δομής του πίνακα σε μια σελίδα HTML παραμένει η ίδια.

Η δομή του πίνακα εξακολουθεί να δημιουργείται χρησιμοποιώντας τις κανονικές ετικέτες HTML του , , και . Ωστόσο, τα δεδομένα συμπληρώνονται χρησιμοποιώντας την οδηγία ng-repeat στο AngularJS.
Ας δούμε ένα απλό παράδειγμα για το πώς μπορούμε να εφαρμόσουμε Angular πίνακες.
Σε αυτό το παράδειγμα,

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

Βήμα 1) Πρώτα θα προσθέσουμε μια ετικέτα "style" στη σελίδα μας HTML, ώστε ο πίνακας να μπορεί να εμφανίζεται ως σωστός πίνακας.

Συμπλήρωση και εμφάνιση δεδομένων σε έναν πίνακα

  1. Η ετικέτα στυλ προστίθεται στη σελίδα HTML. Αυτός είναι ο τυπικός τρόπος προσθήκης οποιωνδήποτε χαρακτηριστικών μορφοποίησης που απαιτούνται για στοιχεία HTML.
  2. Προσθέτουμε δύο τιμές στυλ στο τραπέζι μας.
  • Το ένα είναι ότι πρέπει να υπάρχει ένα σταθερό περίγραμμα για το γωνιακό τραπέζι μας και
  • Το δεύτερο είναι ότι θα πρέπει να έχει τοποθετηθεί padding για τα δεδομένα του Angular πίνακα μας.

Βήμα 2) Το επόμενο βήμα είναι να γράψετε τον κώδικα για τη δημιουργία του πίνακα και είναι τα δεδομένα.

Συμπλήρωση και εμφάνιση δεδομένων σε έναν πίνακα

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

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

  1. Δημιουργούμε πρώτα μια μεταβλητή που ονομάζεται "tutorial" και της εκχωρούμε μερικά ζεύγη κλειδιών-τιμών σε ένα βήμα. Κάθε ζεύγος κλειδιού-τιμής θα χρησιμοποιηθεί ως δεδομένα κατά την εμφάνιση του πίνακα. Στη συνέχεια, η μεταβλητή tutorial εκχωρείται στο αντικείμενο scope έτσι ώστε να είναι προσβάσιμη από την άποψή μας.
  2. Αυτό είναι το πρώτο βήμα για τη δημιουργία ενός πίνακα και χρησιμοποιούμε το ετικέτα.
  3. Για κάθε σειρά δεδομένων, χρησιμοποιούμε την «οδηγία ng-repeat». Αυτή η οδηγία περνά μέσα από κάθε ζεύγος κλειδιού-τιμής στο αντικείμενο του tutorial scope χρησιμοποιώντας τη μεταβλητή ptutor.
  4. Τέλος, χρησιμοποιούμε το ετικέτα μαζί με τα ζεύγη κλειδιού-τιμής (ptutor.Name και ptutor.Description) για να εμφανίσετε τα δεδομένα του γωνιακού πίνακα.

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

Παραγωγή

Συμπλήρωση και εμφάνιση δεδομένων σε έναν πίνακα

Από την παραπάνω έξοδο,

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

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

Ενσωματωμένο φίλτρο AngularJS

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

Στο Angular.JS χρησιμοποιούνται φίλτρα για τη μορφοποίηση της τιμής της έκφρασης πριν εμφανιστεί στον χρήστη. Ένα παράδειγμα φίλτρου είναι το φίλτρο «κεφαλαία» που παίρνει μια έξοδο συμβολοσειράς και μορφοποιεί τη συμβολοσειρά και εμφανίζει όλους τους χαρακτήρες στη συμβολοσειρά ως κεφαλαία.

Έτσι, στο παρακάτω παράδειγμα, εάν η τιμή της μεταβλητής 'TutorialName' είναι 'AngularJS', η έξοδος της παρακάτω έκφρασης θα είναι 'ANGULARJS'.

{{ TurotialName | uppercase }}

Σε αυτήν την ενότητα, θα εξετάσουμε πώς τα φίλτρα orderBy και κεφαλαία μπορούν να χρησιμοποιηθούν σε πίνακες με περισσότερες λεπτομέρειες.

Ταξινόμηση πίνακα με φίλτρο OrderBy

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

ελεγκτές Ελεγκτές σε δράση
Μοντέλα Μοντέλα και δεσμευτικά δεδομένα
Οδηγιών Ευελιξία των οδηγιών

Ας δούμε ένα παράδειγμα, για το πώς μπορούμε να χρησιμοποιήσουμε το φίλτρο «orderBy» και να ταξινομήσουμε τα δεδομένα του Angular πίνακα χρησιμοποιώντας την πρώτη στήλη του πίνακα.

Ταξινόμηση πίνακα με φίλτρο OrderBy

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

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

  1. Χρησιμοποιούμε τον ίδιο κώδικα που κάναμε για τη δημιουργία του πίνακα μας, η μόνη διαφορά αυτή τη φορά είναι ότι χρησιμοποιούμε το φίλτρο "orderBy" μαζί με την οδηγία ng-repeat. Σε αυτήν την περίπτωση, λέμε ότι θέλουμε να παραγγείλουμε τον πίνακα με το κλειδί "Όνομα".

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

Παραγωγή

Ταξινόμηση πίνακα με φίλτρο OrderBy

Από την έξοδο,

  • Μπορούμε να δούμε ότι τα δεδομένα στον πίνακα Angular έχουν ταξινομηθεί σύμφωνα με τα δεδομένα της πρώτης στήλης. Στο σύνολο δεδομένων μας, τα δεδομένα "Οδηγίες" προέρχονται από τα δεδομένα "Μοντέλα", αλλά επειδή εφαρμόσαμε το φίλτρο orderBy, οι πίνακες ταξινομούνται ανάλογα.

Εμφάνιση πίνακα με κεφαλαία φίλτρα

Μπορούμε επίσης να χρησιμοποιήσουμε το φίλτρο κεφαλαίων για να αλλάξουμε τα δεδομένα στον πίνακα Angular σε κεφαλαία.

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

Εμφάνιση πίνακα με κεφαλαία φίλτρα

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

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

  1. Χρησιμοποιούμε τον ίδιο κώδικα που κάναμε για τη δημιουργία του πίνακα μας, η μόνη διαφορά αυτή τη φορά είναι ότι χρησιμοποιούμε το κεφαλαίο φίλτρο. Χρησιμοποιούμε αυτό το φίλτρο σε συνδυασμό με το "ptutor.Name", έτσι ώστε όλο το κείμενο στην πρώτη στήλη να εμφανίζεται με κεφαλαία.

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

Παραγωγή

Εμφάνιση πίνακα με κεφαλαία φίλτρα

Από την έξοδο,

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

Εμφάνιση του ευρετηρίου πίνακα ($index)

Για να εμφανίσετε το ευρετήριο του πίνακα, προσθέστε ένα με $index.

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

Εμφανίστε το Ευρετήριο Πίνακα

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

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

  1. Χρησιμοποιούμε τον ίδιο κώδικα που κάναμε για τη δημιουργία του πίνακα μας, η μόνη διαφορά αυτή τη φορά είναι ότι προσθέτουμε μια επιπλέον σειρά στον πίνακά μας για να εμφανίσουμε τη στήλη ευρετηρίου. Σε αυτήν την πρόσθετη στήλη, χρησιμοποιούμε την ιδιότητα "$index" παρέχεται από το AngularJS και στη συνέχεια χρησιμοποιώντας τον τελεστή +1 για να αυξήσετε το ευρετήριο για κάθε σειρά.

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

Παραγωγή

Εμφανίστε το Ευρετήριο Πίνακα

Από την έξοδο,

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

Περίληψη

  • Οι δομές πίνακα δημιουργούνται χρησιμοποιώντας τις τυπικές ετικέτες που είναι διαθέσιμες εντός HTML. Τα δεδομένα στον πίνακα συμπληρώνονται χρησιμοποιώντας την οδηγία "ng-repeat".
  • Το φίλτρο orderBy μπορεί να χρησιμοποιηθεί για την ταξινόμηση του πίνακα με βάση οποιαδήποτε στήλη εντός του πίνακα.
  • Το φίλτρο κεφαλαίων γραμμάτων μπορεί να χρησιμοποιηθεί για την εμφάνιση των δεδομένων σε οποιαδήποτε στήλη που βασίζεται σε κείμενο με κεφαλαία.
  • Η ιδιότητα "$index" μπορεί να χρησιμοποιηθεί για τη δημιουργία ευρετηρίου για τον πίνακα.
  • Ένα κοινό πρόβλημα που αντιμετωπίζεται κατά την ανάπτυξη με τους πίνακες AngularJS.JS είναι η υλοποίηση μεγάλων συνόλων δεδομένων που έχουν 1000+ σειρές δεδομένων. Μερικές φορές το ng-επανάληψη Η οδηγία μπορεί να μην ανταποκρίνεται και, ως εκ τούτου, ολόκληρη η σελίδα δεν ανταποκρίνεται κατά καιρούς. Σε μια τέτοια περίπτωση, είναι πάντα καλύτερο να υπάρχει σελιδοποίηση στην οποία οι σειρές δεδομένων κατανέμονται σε πολλές σελίδες.