AngularJS-tabel: Sortér med orderBy og filter for store bogstaver

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

Sortering, rækkefølge og tekstformatering af AngularJS-tabeller er alle afhængige af ng-repeat-direktivet plus et filterudtryk. Denne side viser, hvordan orderBy, uppercase, filter og $index forvandler en almindelig HTML-tabel til et live, datadrevet gitter.

  • 🧱 Struktur: Taggene table, tr, td og th opbygger stadig gitteret, så ingen AngularJS-specifik markup erstatter standard HTML.
  • 🔁 Befolkning: Direktivet ng-repeat gennemgår et array på scope-objektet og udsender en række for hvert element, det finder.
  • ↕️ Bestilling: orderBy-filteret sorterer rækker efter en hvilken som helst nøgle, og et omvendt flag vender retningen efter behov.
  • 🔤 Formatering: Filteret for store bogstaver skriver en enkelt kolonne med stort uden at ændre de underliggende data i controlleren.
  • 🔎 Søger: Filteret, der er bundet til et ng-model-input, indsnævrer synlige rækker, mens læseren skriver.
  • 🔢 Nummerering: $index-egenskaben leverer en nulbaseret tæller, så tilføjelse af én producerer et læsbart rækkenummer.
  • 🚀 Skala: Ud over tusind rækker, par limitTo med paginering og track ved at holde siden responsiv.
Læs mere

AngularJS tabel

Tabeller er et af de almindelige elementer, der bruges i HTML, når man arbejder med websider.

Tabeller i HTML er designet ved hjælp af HTML-tagget

  1. tag – Dette er det vigtigste tag, der bruges til at vise tabellen.
  2. – Dette tag bruges til at adskille rækkerne i tabellen.
  3. – Dette tag bruges til at vise de faktiske tabeldata.
  4. – Dette bruges til tabelhoveddata.

Brug af ovenstående tilgængelige HTML-tags sammen med AngularJS, kan vi gøre det nemmere at udfylde tabeldata. Kort sagt bruges ng-repeat-direktivet til at udfylde tabeldata.

Vi vil se på, hvordan man opnår dette i dette kapitel. Vi vil også se på, hvordan vi kan bruge orderBy- og store bogstaver-filtrene sammen med $index-attributten til at vise AngularJS-tabelindekser. Det første trin er selve markup'en.

Udfyld og vis data i en tabel

Som vi diskuterede i introduktionen til dette kapitel, forbliver grundlaget for at skabe tabelstrukturen på en HTML-side det samme.

Strukturen af ​​tabellen er stadig oprettet ved hjælp af de normale HTML-tags af , , og . Dataene udfyldes dog ved at bruge ng-repeat-direktivet i AngularJS.
Lad os se på et simpelt eksempel på, hvordan vi kan implementere AngularJS-tabeller.
I dette eksempel

Vi skal oprette en AngularJS-tabel, som vil indeholde kursusemner sammen med deres beskrivelser.

Trin 1) Vi vil først tilføje et "stil"-tag til vores HTML-side, så tabellen kan vises som en ordentlig tabel.

Udfyld og vis data i en tabel

  1. Stiltagget tilføjes til HTML-siden. Dette er standardmetoden til at tilføje eventuelle formateringsattributter, som er nødvendige for HTML-elementer.
  2. Vi tilføjer to stilværdier til vores tabel.
  • Den ene er, at der skal være en solid kant til vores AngularJS-tabel, og
  • For det andet skal der være margin til vores AngularJS-tabeldata.

Trin 2) Det næste trin er at skrive koden for at generere tabellen, og dens data.

Udfyld og vis data i en 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>

⚠️ Advarsel: Denne liste er gengivet nøjagtigt som den blev offentliggjort, og fire linjer i den er fejlbehæftede. chrset stavefejl charsetTre AngularJS-builds indlæses på én gang, hvilket er én for meget. lib/bootstrap.js og lib/bootstrap.css findes ikke. Behold angular.min.js alene.

Code Forklaring

  1. Vi opretter først en variabel kaldet "tutorial" og tildeler den nogle nøgleværdi-par i ét trin. Hvert nøgle-værdi-par vil blive brugt som data, når tabellen vises. Selvstudievariablen tildeles derefter scope-objektet, så det kan tilgås fra vores visning.
  2. Dette er det første trin i at skabe en tabel, og vi bruger tag.
  3. For hver række af data bruger vi "ng-repeat-direktivet". Dette direktiv gennemgår hvert nøgleværdi-par i selvstudiets scope-objekt ved at bruge variablen ptutor.
  4. Endelig bruger vi tag sammen med nøgleværdi-parrene (ptutor.Name og ptutor.Description) for at vise AngularJS-tabeldataene.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Produktion

Udfyld og vis data i en tabel

Fra ovenstående output,

  • Vi kan se, at tabellen vises korrekt med dataene fra rækken af ​​nøgleværdi-par, der er defineret i controlleren.
  • Tabeldataene blev genereret ved at gå gennem hvert af nøgleværdiparrene ved at bruge "ng-repeat-direktivet".

Rå rækker er kun udgangspunktet, fordi filtre bestemmer, hvordan disse rækker sorteres og formateres.

AngularJS indbygget filter

Det er meget almindeligt at bruge de indbyggede filtre i AngularJS til at ændre den måde, dataene vises på i tabellerne. Vi har allerede set filtre i aktion i et tidligere kapitel. Lad os få en hurtig opsummering af filtre, før vi går videre.

I AngularJS bruges filtre til at formatere værdien af ​​et udtryk, før det vises til brugeren. Et eksempel på et filter er 'uppercase'-filteret, der tager et strengoutput og formaterer strengen og viser alle tegnene i strengen som store bogstaver.

Så i eksemplet nedenfor, hvis værdien af ​​variablen 'TutorialName' er 'AngularJS', vil outputtet af udtrykket nedenfor være 'ANGULARJS'.

{{ TutorialName | uppercase }}

I dette afsnit vil vi se på, hvordan filtrene orderBy og store bogstaver kan bruges i tabeller mere detaljeret.

Almindelige AngularJS-filtre brugt med tabeller

Tabellen nedenfor sammenligner de filtre, der oftest bruges i et ng-repeat-udtryk.

Filtrer Formål Eksempel
orderBy Sorterer rækker efter en nøgle | orderBy : 'Name'
filtrere Bevarer matchende rækker | filter : searchText
store bogstaver Tekst skrives med stort | uppercase
små bogstaver Sænker teksten | lowercase
grænseTil Antal rækker med store bogstaver | limitTo : 25
valuta Formaterer penge | currency : '$'
dato Formaterer datoer | date : 'dd MMM yyyy'
nummer Sætter decimaler | number : 2

Sortering er det filter, læserne beder om først, så orderBy-filteret kommer derefter.

Sorter tabel med OrderBy-filter

Dette filter bruges til at sortere tabellen baseret på en af ​​tabelkolonnerne. I det forrige eksempel så outputtet for vores AngularJS-tabeldata ud som vist nedenfor.

Controllere Controllere i aktion
Modeller Modeller og bindingsdata
Direktiver Direktivernes fleksibilitet

Lad os se på et eksempel på, hvordan vi kan bruge filteret "orderBy" og sortere AngularJS-tabeldataene ved hjælp af den første kolonne i tabellen.

Sorter tabel med OrderBy-filter

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

  1. Vi bruger den samme kode, som vi gjorde til at oprette vores tabel, den eneste forskel denne gang er, at vi bruger "orderBy"-filteret sammen med ng-repeat-direktivet. I dette tilfælde siger vi, at vi vil bestille bordet med tasten "Navn".

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Produktion

Sorter tabel med OrderBy-filter

Fra udgangen,

  • Vi kan se, at dataene i AngularJS-tabellen er sorteret i henhold til dataene i den første kolonne. Arrayet er deklareret i rækkefølgen Controllers, Models, Directives, så uden et filter vises rækkerne i den rækkefølge. orderBy : 'Name' arrangerer Navneværdierne alfabetisk, hvilket flytter Direktioner foran Modeller og producerer Controllere, Direktioner, Modeller.

Sorter ind Reverse og fra kolonneoverskrifter

orderBy-filteret accepterer et andet argument. Sender true vender retningen, og lagring af både nøglen og det flag på oscilloskopet lader en læser sortere tabellen igen ved at klikke på en overskrift, da ordreEfter reference beskriver.

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

Rækkefølgen ændrer rækkefølgen. Det næste filter ændrer, hvordan en enkelt kolonne læses.

RELATEREDE ARTIKLER

Displaytabel med filter med store bogstaver

Vi kan også bruge filteret med store bogstaver til at ændre dataene i AngularJS-tabellen til store bogstaver.

Lad os tage et kig på et eksempel på, hvordan vi kan opnå dette.

Displaytabel med filter med store bogstaver

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

  1. Vi bruger den samme kode, som vi gjorde til at oprette vores tabel, den eneste forskel denne gang er, at vi bruger filteret med store bogstaver. Vi bruger dette filter sammen med "ptutor.Name", så al teksten i den første kolonne vil blive vist med store bogstaver.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Produktion

Displaytabel med filter med store bogstaver

Fra udgangen,

  • Vi kan se, at ved at bruge filteret "store bogstaver", vises alle data i den første kolonne med store bogstaver.

Det er nyttigt at formatere en kolonne, og læsere ønsker ofte et rækkenummer ved siden af ​​den.

Vis tabelindekset ($index)

For at få vist tabelindekset skal du tilføje en med $indeks.

Lad os tage et kig på et eksempel på, hvordan vi kan opnå dette.

Vis tabelindekset

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

  1. Vi bruger den samme kode, som vi gjorde til at oprette vores tabel, den eneste forskel denne gang er, at vi tilføjer en ekstra række til vores tabel for at vise indekskolonnen. I denne ekstra kolonne bruger vi egenskaben "$index" leveret af AngularJS og derefter bruge +1 operatoren til at øge indekset for hver række.

Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Produktion

Vis tabelindekset

Fra udgangen,

  • Du kan se, at der er oprettet en ekstra kolonne. I denne kolonne kan vi se, hvilke indekser der oprettes for hver række.

Tre rækker passer på én skærm. Et realistisk datasæt gør det ikke, så læserne har brug for en måde at søge i det.

Sådan filtrerer og søger du i AngularJS-tabeldata

AngularJS leverer et filter med navnet filterPlaceret efter ng-repeat sammenligner den hvert element i arrayet med en værdi og beholder kun de rækker, der matcher. Bind denne værdi til en tekstboks med ng-model, og tabellen indsnævrer sig selv, mens læseren skriver, uden hændelseshandler og uden controllerkode.

Tilføj en livesøgning Box

Tilføj et input over tabellen, og send arrayet gennem filteret. De to deler den samme scope-egenskab, så AngularJS revurderer udtrykket ved hvert tastetryk.

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

  1. Inputtet skriver det, der skrives ind i searchText på omfanget.
  2. filter : searchText gemmer rækker hvis navn eller Description indeholder den delstreng, ignorerer store/små bogstaver.
  3. For at søge i en enkelt kolonne i stedet, send et objekt: filter : {Name : searchText}.
  4. Filterkæde, så | filter : searchText | orderBy : 'Name' søger først og sorterer derefter de overlevende.

Hold store borde responsive

Et almindeligt problem, der opstår under udvikling med AngularJS-tabeller, er et stort datasæt, der indeholder tusind rækker eller mere. ng-gentag Direktivet opretter et scope og en watcher pr. række, så siden kan holde op med at reagere. Spred rækkerne på tværs af sider i stedet, og tilføj track by så eksisterende rækker genbruges i stedet for at blive genopbygget.

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

Ofte Stillede Spørgsmål

ng-repeat kræver en unik nøgle for hver række. To identiske værdier forårsager dupes-fejlen. Tilføj en unik egenskab, eller skriv track ved $index, så rækkens position bliver nøglen i stedet for dens værdi.

Ja. Send et array af nøgler, såsom orderBy: ['Navn','DescriptAngularJS sorterer på den første nøgle og bryder derefter forbindelsen med den anden. Sæt et minustegn foran en nøgle for at omvende den nøgle alene.

Hver ng-repeat række eksponerer de booleske værdier $even og $odd. Bind en af ​​dem med ng-class eller ng-if for at anvende en baggrundsfarve, hvilket producerer stribede rækker uden ekstra CSS-selektor i tabellen.

Assistenter som f.eks. GitHub Copilot scaffold ng-repeat markup hurtigt, men de opfinder stadig scriptstier og stavefejlattributter. Bekræft hvert forslag mod AngularJS-filterreference før afsendelseping.

AI-værktøjer omskriver ng-repeat som en kontrolflowblok og flytter filtre ind i rør eller signaler. Fordi Vinkelforskydning har ingen indbygget orderBy eller filterpipe, gennemgå hver genereret sortering og søg manuelt.

Opsummer dette indlæg med: