Tabel AngularJS: Sortare cu orderBy și filtru cu majuscule

prin: James Hartman James Hartman
Hours Actualizat

⚡ Rezumat inteligent

Sortarea, ordonarea și formatarea textului în tabelele AngularJS se bazează pe directiva ng-repeat plus o expresie de filtrare. Această pagină arată cum orderBy, uppercase, filter și $index transformă un tabel HTML simplu într-o grilă dinamică, bazată pe date.

  • 🧱 Structura: Etichetele table, tr, td și th construiesc în continuare grila, deci niciun markup specific AngularJS nu înlocuiește HTML-ul standard.
  • 🔁 populaţie: Directiva ng-repeat parcurge un array pe obiectul scope și emite un rând pentru fiecare element pe care îl găsește.
  • ↕️ ordonare: Filtrul orderBy sortează rândurile după orice cheie, iar un indicator inversează direcția la cerere.
  • 🔤 Formatare: Filtrul cu majuscule scrie cu majuscule o singură coloană fără a modifica datele subiacente din controler.
  • 🔎 In cautarea: Filtrul legat de o intrare ng-model restrânge rândurile vizibile pe măsură ce cititorul tastează.
  • 🔢 Numerotare: Proprietatea $index furnizează un contor cu baza zero, astfel încât adăugarea unuia produce un număr de rând lizibil.
  • 🚀 Scară: Dincolo de o mie de rânduri, asociați limitTo cu paginația și track pentru a menține pagina responsivă.
Citește mai mult

Tabelul AngularJS

Tabelele sunt unul dintre elementele comune folosite în HTML atunci când lucrați cu pagini web.

Mesele în HTML sunt proiectate folosind eticheta HTML

  1. tag – Aceasta este eticheta principală utilizată pentru afișarea tabelului.
  2. – Această etichetă este folosită pentru a segrega rândurile din tabel.
  3. – Această etichetă este utilizată pentru afișarea datelor reale din tabel.
  4. – Acesta este utilizat pentru datele antetului tabelului.

Folosind etichetele HTML disponibile de mai sus împreună cu AngularJS, putem facilita completarea datelor din tabel. Pe scurt, directiva ng-repeat este folosită pentru a completa datele din tabel.

Vom analiza cum putem realiza acest lucru în cadrul acestui capitol. De asemenea, vom analiza cum putem utiliza filtrele orderBy și uppercase, împreună cu atributul $index, pentru a afișa indexurile tabelelor AngularJS. Primul pas este markup-ul în sine.

Populați și afișați datele într-un tabel

După cum am discutat în introducerea acestui capitol, baza pentru crearea structurii tabelului într-o pagină HTML rămâne aceeași.

Structura tabelului este încă creată folosind etichetele HTML normale ale , , și . Cu toate acestea, datele sunt populate folosind directiva ng-repeat în AngularJS.
Să vedem un exemplu simplu despre cum putem implementa tabele AngularJS.
În acest exemplu,

Vom crea un tabel AngularJS care va conține subiecte de curs împreună cu descrierile lor.

Pas 1) Mai întâi vom adăuga o etichetă „stil” la pagina noastră HTML, astfel încât tabelul să poată fi afișat ca un tabel adecvat.

Populați și afișați datele într-un tabel

  1. Eticheta de stil este adăugată în pagina HTML. Aceasta este modalitatea standard de a adăuga orice atribute de formatare care sunt necesare pentru elementele HTML.
  2. Adăugăm două valori de stil la tabelul nostru.
  • Una este că ar trebui să existe o bordură solidă pentru tabelul nostru AngularJS și
  • În al doilea rând, ar trebui să existe o zonă de umplere (padding) pentru datele din tabelul nostru AngularJS.

Pas 2) Următorul pas este să scrieți codul pentru a genera tabelul și datele acestuia.

Populați și afișați datele într-un tabel

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

⚠️ Atenție: Această listă este reprodusă exact așa cum a fost publicată, iar patru rânduri din ea sunt greșite. chrset greșeli de ortografie charsetTrei build-uri AngularJS se încarcă simultan, ceea ce este cu una prea mult. lib/bootstrap.js și lib/bootstrap.css nu există. Păstrează angular.min.js numai.

Code Explicație

  1. Mai întâi creăm o variabilă numită „tutorial” și îi atribuim câteva perechi cheie-valoare într-un singur pas. Fiecare pereche cheie-valoare va fi folosită ca date la afișarea tabelului. Variabila tutorial este apoi atribuită obiectului scope, astfel încât să poată fi accesată din vizualizarea noastră.
  2. Acesta este primul pas în crearea unui tabel și folosim etichetă.
  3. Pentru fiecare rând de date, folosim „directiva ng-repeat”. Această directivă parcurge fiecare pereche cheie-valoare din obiectul domeniului tutorial folosind variabila ptutor.
  4. În cele din urmă, folosim eticheta împreună cu perechile cheie-valoare (ptutor.Name și ptutor.Description) pentru a afișa datele din tabelul AngularJS.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Populați și afișați datele într-un tabel

Din rezultatul de mai sus,

  • Putem vedea că tabelul este afișat corect cu datele din matricea de perechi cheie-valoare definite în controler.
  • Datele din tabel au fost generate prin parcurgerea fiecărei perechi cheie-valoare utilizând „directiva ng-repeat”.

Rândurile brute sunt doar punctul de plecare, deoarece filtrele decid modul în care sunt ordonate și formatate aceste rânduri.

Filtru încorporat AngularJS

Este foarte obișnuit să folosiți filtrele încorporate în AngularJS pentru a schimba modul în care datele sunt afișate în tabele. Am văzut deja filtrele în acțiune într-un capitol anterior. Să facem o recapitulare rapidă a filtrelor înainte de a continua.

În AngularJS, filtrele sunt folosite pentru a formata valoarea expresiei înainte de a fi afișată utilizatorului. Un exemplu de filtru este filtrul „uppercase” (caiet de caractere), care preia un șir de caractere de ieșire, formatează șirul și afișează toate caracterele din șir cu majuscule.

Deci, în exemplul de mai jos, dacă valoarea variabilei „TutorialName” este „AngularJS”, rezultatul expresiei de mai jos va fi „ANGULARJS”.

{{ TutorialName | uppercase }}

În această secțiune, ne vom uita la modul în care filtrele orderBy și majuscule pot fi utilizate în tabele mai detaliat.

Filtre AngularJS comune utilizate cu tabele

Tabelul de mai jos compară filtrele utilizate cel mai des în cadrul unei expresii ng-repeat.

Filtru Scop Exemplu
comandăDupă Sortează rândurile după o cheie | orderBy : 'Name'
filtru Păstrează rândurile corespondente | filter : searchText
majuscule Textul se scrie cu majusculă | uppercase
litere mici Coboară textul | lowercase
limităLa Numărul de rânduri cu majuscule | limitTo : 25
valută Formatează banii | currency : '$'
data Formatează datele | date : 'dd MMM yyyy'
număr Setează zecimale | number : 2

Sortarea este primul filtru pe care cititorii îl solicită, așa că filtrul orderBy vine următorul.

Sortați tabelul cu filtrul OrderBy

Acest filtru este utilizat pentru a sorta tabelul în funcție de una dintre coloanele tabelului. În exemplul anterior, rezultatul pentru datele tabelului nostru AngularJS a apărut așa cum se arată mai jos.

Controlere Controlorii în acțiune
modele Modele și date obligatorii
Directivele Flexibilitatea directivelor

Să luăm un exemplu despre cum putem folosi filtrul „orderBy” și sorta datele din tabelul AngularJS folosind prima coloană din tabel.

Sortați tabelul cu filtrul 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 Explicație

  1. Folosim același cod ca și pentru crearea tabelului nostru, singura diferență de această dată este că folosim filtrul „orderBy” împreună cu directiva ng-repeat. În acest caz, spunem că vrem să ordonăm tabelul după cheia „Nume”.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Sortați tabelul cu filtrul OrderBy

Din ieșire,

  • Putem vedea că datele din tabelul AngularJS au fost sortate conform datelor din prima coloană. Matricea este declarată în ordinea Controllere, Modele, Directive, deci fără un filtru rândurile apar în această ordine. Aplicarea orderBy : 'Name' aranjează valorile Name în ordine alfabetică, ceea ce mută Directivele înaintea Modelelor și produce Controlere, Directive, Modele.

Sortați Reverse și din anteturile coloanelor

Filtrul orderBy acceptă un al doilea argument. Transmiterea true inversează direcția, iar stocarea atât a cheii, cât și a acelui indicator pe osciloscop permite unui cititor să resorteze tabelul făcând clic pe un antet, deoarece comandăPrin referință descrie.

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

Ordonarea modifică secvența rândurilor. Următorul filtru modifică modul în care se citește o singură coloană.

ARTICOLE SIMILARE

Afișează tabel cu filtru majuscule

De asemenea, putem folosi filtrul cu majuscule pentru a schimba datele din tabelul AngularJS în majuscule.

Să aruncăm o privire la un exemplu despre cum putem realiza acest lucru.

Afișează tabel cu filtru majuscule

<!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 Explicație

  1. Folosim același cod ca și pentru crearea tabelului nostru, singura diferență de această dată este că folosim filtrul majuscule. Folosim acest filtru împreună cu „ptutor.Name”, astfel încât tot textul din prima coloană să fie afișat cu majuscule.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Afișează tabel cu filtru majuscule

Din ieșire,

  • Putem vedea că, folosind filtrul „majuscule”, toate datele din prima coloană sunt afișate cu caractere majuscule.

Formatarea unei coloane este utilă, iar cititorii doresc adesea un număr de rând lângă ea.

Afișați indexul tabelului ($index)

Pentru a afișa indexul tabelului, adăugați a cu $index.

Să aruncăm o privire la un exemplu despre cum putem realiza acest lucru.

Afișați indexul tabelului

<!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 Explicație

  1. Folosim același cod ca și pentru crearea tabelului nostru, singura diferență de această dată este că adăugăm un rând suplimentar la tabelul nostru pentru a afișa coloana index. În această coloană suplimentară, folosim proprietatea „$index”. furnizate de AngularJS și apoi folosind operatorul +1 pentru a incrementa indexul pentru fiecare rând.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

producție

Afișați indexul tabelului

Din ieșire,

  • Puteți vedea că a fost creată o coloană suplimentară. În această coloană, putem vedea indecșii creați pentru fiecare rând.

Trei rânduri încap pe un singur ecran. Un set de date realist nu încape, așa că cititorii au nevoie de o modalitate de a căuta în el.

Cum se filtrează și se caută datele din tabelul AngularJS

AngularJS livrează un filtru numit filterPlasat după ng-repeat, acesta compară fiecare element din matrice cu o valoare și păstrează doar rândurile care se potrivesc. Legați acea valoare la o casetă de text cu ng-model și tabelul se restrânge în timp ce cititorul tastează, fără un handler de tratare a evenimentelor și fără cod de controler.

Adăugați o căutare live Box

Adăugați o intrare deasupra tabelului și transmiteți matricea prin filtru. Cele două au aceeași proprietate scope, așa că AngularJS reevaluează expresia la fiecare apăsare de tastă.

<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 Explicaţie:

  1. Intrarea scrie orice este tastat în searchText asupra domeniului de aplicare.
  2. filter : searchText păstrează rândurile al căror nume sau Description conține acel subșir, ignorând majusculele/minusculele.
  3. Pentru a căuta într-o singură coloană, transmiteți un obiect: filter : {Name : searchText}.
  4. Lanțul de filtre, deci | filter : searchText | orderBy : 'Name' caută mai întâi și apoi sortează supraviețuitorii.

Mențineți tabelele mari responsive

O problemă frecventă întâlnită în timpul dezvoltării tabelelor AngularJS este un set de date mare care conține o mie sau mai multe rânduri. ng-repetă Directiva creează un domeniu de aplicare și un observator pe rând, astfel încât pagina să nu mai răspundă. Împărțiți rândurile pe pagini și adăugați track by astfel încât rândurile existente sunt reutilizate în loc să fie reconstruite.

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

Întrebări frecvente

Funcția ng-repeat necesită o cheie unică pentru fiecare rând. Două valori identice generează eroarea de duplicare. Adăugați o proprietate distinctă sau scrieți track prin $index, astfel încât poziția rândului devine cheia în loc de valoarea sa.

Da. Transmiteți o matrice de chei, cum ar fi orderBy : ['Name','Description']. AngularJS sortează pe baza primei chei, apoi rupe legăturile cu a doua. Adăugați un semn minus la prefixul unei chei pentru a inversa doar acea cheie.

Fiecare rând cu ng-repeat expune valorile booleene $even și $odd. Legați unul dintre ele cu ng-class sau ng-if pentru a aplica o culoare de fundal, ceea ce produce rânduri cu dungi fără niciun selector CSS suplimentar în tabel.

Asistenți precum Copilotul GitHub scaffold ng-repeat markup rapid, dar totuși inventează căi de script și atribute de ortografie greșită. Verificați fiecare sugestie în raport cu Referință filtru AngularJS înainte de navăping.

Instrumentele de inteligență artificială rescriu ng-repeat ca un bloc de flux de control și mută filtrele în conducte sau semnale. Deoarece Unghiular nu are o funcție orderBy sau o pipe de filtrare încorporată, verifică fiecare sortare generată și caută manual.

Rezumați această postare cu: