Πίνακας AngularJS: Ταξινόμηση με orderBy & Φίλτρο Κεφαλαίων

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

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

Η ταξινόμηση, η σειρά και η μορφοποίηση κειμένου πινάκων στο AngularJS βασίζονται στην οδηγία ng-repeat συν μια έκφραση φίλτρου. Αυτή η σελίδα δείχνει πώς οι συναρτήσεις orderBy, uppercase, filter και $index μετατρέπουν έναν απλό πίνακα HTML σε ένα ενεργό πλέγμα που βασίζεται σε δεδομένα.

  • 🧱 Δομή: Οι ετικέτες table, tr, td και th εξακολουθούν να δημιουργούν το πλέγμα, επομένως καμία ειδική σήμανση για το AngularJS δεν αντικαθιστά την τυπική HTML.
  • 🔁 Πληθυσμός: Η οδηγία ng-repeat μετακινεί έναν πίνακα στο αντικείμενο scope και εκπέμπει μία γραμμή για κάθε στοιχείο που βρίσκει.
  • ↕️ Ταξινόμηση: Το φίλτρο orderBy ταξινομεί τις γραμμές με βάση οποιοδήποτε κλειδί και μια σημαία αντίστροφης κατεύθυνσης αλλάζει την κατεύθυνση κατ' απαίτηση.
  • 🔤 Μορφοποίηση: Το φίλτρο με κεφαλαία γράμματα μετατρέπει μια μεμονωμένη στήλη σε κεφαλαία γράμματα χωρίς να τροποποιεί τα υποκείμενα δεδομένα στον ελεγκτή.
  • 🔎 Ερευνητικός: Το φίλτρο που είναι συνδεδεμένο με μια είσοδο ng-model περιορίζει τις ορατές γραμμές καθώς ο αναγνώστης πληκτρολογεί.
  • 🔢 Αρίθμηση: Η ιδιότητα $index παρέχει έναν μετρητή που βασίζεται στο μηδέν, επομένως η προσθήκη ενός παράγει έναν αναγνώσιμο αριθμό γραμμής.
  • 🚀 Κλίμακα: Πέρα από χίλιες γραμμές, αντιστοιχίστε το limitTo με την σελιδοποίηση και το track από για να διατηρείται η σελίδα σε απόκριση.
Περισσότερα

Πίνακας AngularJS

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

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

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

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

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

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

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

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

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

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

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

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

Βήμα 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>

⚠️ Προειδοποίηση: Αυτή η καταχώριση αναπαράγεται ακριβώς όπως δημοσιεύτηκε και τέσσερις γραμμές σε αυτήν είναι ελαττωματικές. chrset ορθογραφικά λάθη charsetΤρεις δομές AngularJS φορτώνονται ταυτόχρονα, κάτι που είναι υπερβολικό. lib/bootstrap.js και lib/bootstrap.css δεν υπάρχουν. Διατηρήστε angular.min.js μόνο.

Code εξήγηση

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

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

Παραγωγή

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

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

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

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

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

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

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

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

{{ TutorialName | uppercase }}

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

Κοινά φίλτρα AngularJS που χρησιμοποιούνται με πίνακες

Ο παρακάτω πίνακας συγκρίνει τα φίλτρα που χρησιμοποιούνται συχνότερα μέσα σε μια έκφραση ng-repeat.

Φίλτρα Σκοπός Παράδειγμα
Ταξινόμηση κατά Ταξινομεί γραμμές κατά κλειδί | orderBy : 'Name'
φιλτράρισμα Διατηρεί τις αντίστοιχες γραμμές | filter : searchText
κεφαλαία Κεφαλαιοποιεί το κείμενο | uppercase
πεζά γράμματα Χαμηλώνει το κείμενο | lowercase
όριοΣε Αριθμός γραμμών με κεφαλαία γράμματα | limitTo : 25
νόμισμα Μορφοποιεί χρήματα | currency : '$'
Ραντεβού Μορφοποιεί ημερομηνίες | date : 'dd MMM yyyy'
αριθμός Ορίζει δεκαδικούς αριθμούς | number : 2

Η ταξινόμηση είναι το φίλτρο που ζητούν πρώτο οι αναγνώστες, επομένως το φίλτρο orderBy έρχεται στη συνέχεια.

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

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

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

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

Ταξινόμηση πίνακα με φίλτρο 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>

Code εξήγηση

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

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

Παραγωγή

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

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

  • Μπορούμε να δούμε ότι τα δεδομένα στον πίνακα AngularJS έχουν ταξινομηθεί σύμφωνα με τα δεδομένα στην πρώτη στήλη. Ο πίνακας δηλώνεται με τη σειρά Controllers (Ελεγκτές), Models (Μοντέλα), Directives (Οδηγίες), επομένως χωρίς φίλτρο οι γραμμές εμφανίζονται με αυτήν τη σειρά. orderBy : 'Name' Ταξινομεί τις τιμές Ονόματος αλφαβητικά, γεγονός που μετακινεί τις Οδηγίες μπροστά από τα Μοντέλα και παράγει Ελεγκτές, Οδηγίες και Μοντέλα.

Ταξινόμηση Reverse και από κεφαλίδες στηλών

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

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Η ταξινόμηση αλλάζει την ακολουθία των γραμμών. Το επόμενο φίλτρο αλλάζει τον τρόπο ανάγνωσης μιας μεμονωμένης στήλης.

Μην χάσετε:

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

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

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

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

<!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>

Code εξήγηση

  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>

Code εξήγηση

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

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

Παραγωγή

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

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

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

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

Πώς να φιλτράρετε και να αναζητήσετε δεδομένα πίνακα AngularJS

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

Προσθήκη ζωντανής αναζήτησης Box

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

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Επεξήγηση:

  1. Η είσοδος γράφει ό,τι πληκτρολογείται searchText στο πεδίο εφαρμογής.
  2. filter : searchText διατηρεί γραμμές των οποίων το Όνομα ή DescriptΤο ιόν περιέχει αυτήν την υποσυμβολοσειρά, αγνοώντας την πεζή και την πτώση.
  3. Για να αναζητήσετε μια μεμονωμένη στήλη, περάστε ένα αντικείμενο: filter : {Name : searchText}.
  4. Φίλτρα αλυσίδας, έτσι | filter : searchText | orderBy : 'Name' πρώτα ψάχνει και μετά ταξινομεί τους επιζώντες.

Διατηρήστε τα μεγάλα τραπέζια σε άριστη απόκριση

Ένα συνηθισμένο πρόβλημα που αντιμετωπίζεται κατά την ανάπτυξη πινάκων AngularJS είναι ένα μεγάλο σύνολο δεδομένων που περιέχει χίλιες γραμμές ή περισσότερες. ng-επανάληψη η οδηγία δημιουργεί ένα πεδίο εφαρμογής και έναν παρατηρητή ανά γραμμή, έτσι ώστε η σελίδα να μπορεί να σταματήσει να ανταποκρίνεται. Διαδώστε τις γραμμές στις σελίδες και προσθέστε track by έτσι ώστε οι υπάρχουσες σειρές να επαναχρησιμοποιούνται αντί να ανακατασκευάζονται.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

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

Η συνάρτηση ng-repeat χρειάζεται ένα μοναδικό κλειδί για κάθε γραμμή. Δύο πανομοιότυπες τιμές προκαλούν σφάλμα διπλοτύπων. Προσθέστε μια ξεχωριστή ιδιότητα ή γράψτε track από το $index, έτσι ώστε η θέση της γραμμής να γίνεται το κλειδί αντί για την τιμή της.

Ναι. Διαβιβάστε έναν πίνακα κλειδιών, όπως orderBy : ['Όνομα','Description']. Το AngularJS ταξινομεί με βάση το πρώτο κλειδί και, στη συνέχεια, διακόπτει τους δεσμούς με το δεύτερο. Προσθέτει ένα πλήκτρο με ένα πρόθεμα μείον για να αντιστρέψετε μόνο αυτό το κλειδί.

Κάθε γραμμή ng-repeat εκθέτει τις $even και $odd booleans. Συνδέστε μία από αυτές με την ng-class ή την ng-if για να εφαρμόσετε ένα χρώμα φόντου, το οποίο παράγει ριγέ γραμμές χωρίς επιπλέον επιλογέα CSS στον πίνακα.

Βοηθοί όπως GitHub Copilot scaffold ng-repeat markup γρήγορα, ωστόσο εξακολουθούν να εφευρίσκουν διαδρομές σεναρίου και χαρακτηριστικά ορθογραφικών λαθών. Επαληθεύστε κάθε πρόταση σε σχέση με το Αναφορά φίλτρου AngularJS πριν από το πλοίοping.

Τα εργαλεία τεχνητής νοημοσύνης ξαναγράφουν το ng-repeat ως μπλοκ ροής ελέγχου και μετακινούν φίλτρα σε σωλήνες ή σήματα. Επειδή Γωνιώδης Δεν έχει ενσωματωμένη εντολή orderBy ή διοχέτευση φίλτρου, ελέγξτε κάθε δημιουργημένη ταξινόμηση και αναζητήστε χειροκίνητα.

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