AngularJS-tabell: Sortera med orderBy och versalfilter

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

Sortering, ordning och textformatering av tabeller i AngularJS är alla beroende av ng-repeat-direktivet plus ett filteruttryck. Den här sidan visar hur orderBy, uppercase, filter och $index förvandlar en vanlig HTML-tabell till ett aktivt, datadrivet rutnät.

  • 🧱 Strukturera: Taggarna table, tr, td och th bygger fortfarande rutnätet, så ingen AngularJS-specifik markup ersätter standard HTML.
  • 🔁 Befolkning: Direktivet ng-repeat leder en array på scope-objektet och genererar en rad för varje objekt den hittar.
  • ↕️ Beställning: Filtret orderBy sorterar rader efter valfri nyckel, och en omvänd flagga vänder riktningen på begäran.
  • 🔤 Formatering: Filtret för versaler skriver ut en enskild kolumn med versaler utan att ändra underliggande data i kontrollenheten.
  • 🔎 Sökande: Filterfiltret som är bundet till en ng-modellindata begränsar synliga rader när läsaren skriver.
  • 🔢 Numrering: Egenskapen $index tillhandahåller en nollbaserad räknare, så att lägga till ett ger ett läsbart radnummer.
  • 🚀 Skala: Utöver tusen rader, para ihop limitTo med paginering och track av för att hålla sidan responsiv.
Läs mer

AngularJS-tabell

Tabeller är ett av de vanligaste elementen som används i HTML när man arbetar med webbsidor.

Tabeller i html är utformade med hjälp av HTML-taggen

  1. tagg – Detta är huvudtaggen som används för att visa tabellen.
  2. – Den här taggen används för att separera raderna i tabellen.
  3. – Denna tagg används för att visa den faktiska tabelldatan.
  4. – Detta används för tabellhuvuddata.

Använda ovanstående tillgängliga HTML-taggar tillsammans med AngularJS, kan vi göra det enklare att fylla i tabelldata. Kort sagt, direktivet ng-repeat används för att fylla i tabelldata.

Vi kommer att titta på hur man kan uppnå detta i det här kapitlet. Vi kommer också att titta på hur vi kan använda orderBy- och versalfilter tillsammans med attributet $index för att visa AngularJS-tabellindex. Det första steget är själva markupen.

Fyll i och visa data i en tabell

Som vi diskuterade i inledningen till detta kapitel förblir grunden för att skapa tabellstrukturen på en HTML-sida densamma.

Tabellens struktur skapas fortfarande med de vanliga HTML-taggarna , , och . Data fylls dock i genom att använda ng-repeat-direktivet i AngularJS.
Låt oss titta på ett enkelt exempel på hur vi kan implementera AngularJS-tabeller.
I detta exempel,

Vi ska skapa en AngularJS-tabell som kommer att innehålla kursämnen tillsammans med deras beskrivningar.

Steg 1) Vi kommer först att lägga till en "stil"-tagg på vår HTML-sida så att tabellen kan visas som en riktig tabell.

Fyll i och visa data i en tabell

  1. Stiltaggen läggs till på HTML-sidan. Detta är standardsättet att lägga till alla formateringsattribut som krävs för HTML-element.
  2. Vi lägger till två stilvärden till vår tabell.
  • En är att det ska finnas en heldragen kantlinje runt vår AngularJS-tabell och
  • För det andra bör det finnas utfyllnad på plats för våra AngularJS-tabelldata.

Steg 2) Nästa steg är att skriva koden för att generera tabellen och dess data.

Fyll i och visa data i en tabell

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

⚠️ Varning: Denna lista återges exakt som den publicerades, och fyra rader i den är felaktiga. chrset felstavningar charsetTre AngularJS-byggen laddas samtidigt, vilket är en för mycket. lib/bootstrap.js och lib/bootstrap.css finns inte. Behåll angular.min.js Endast.

Code Förklaring

  1. Vi skapar först en variabel som heter "tutorial" och tilldelar den några nyckel-värdepar i ett steg. Varje nyckel-värdepar kommer att användas som data när tabellen visas. Handledningsvariabeln tilldelas sedan scope-objektet så att den kan nås från vår vy.
  2. Detta är det första steget i att skapa en tabell, och vi använder märka.
  3. För varje rad med data använder vi "ng-repeat-direktivet". Detta direktiv går igenom varje nyckel-värdepar i tutorial scope-objektet med hjälp av variabeln ptutor.
  4. Slutligen använder vi tagga tillsammans med nyckel-värdeparen (ptutor.Name och ptutor.Description) för att visa AngularJS-tabelldata.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion

Fyll i och visa data i en tabell

Från ovanstående utgång,

  • Vi kan se att tabellen visas korrekt med data från arrayen av nyckel-värdepar som definieras i styrenheten.
  • Tabelldatan genererades genom att gå igenom vart och ett av nyckel-värdeparen med hjälp av "ng-repeat-direktivet".

Råa rader är bara utgångspunkten, eftersom filter avgör hur dessa rader ordnas och formateras.

AngularJS inbyggt filter

Det är mycket vanligt att använda de inbyggda filtren i AngularJS för att ändra hur data visas i tabellerna. Vi har redan sett filter i aktion i ett tidigare kapitel. Låt oss ha en snabb sammanfattning av filter innan vi fortsätter.

I AngularJS används filter för att formatera värdet på ett uttryck innan det visas för användaren. Ett exempel på ett filter är filtret 'versaler' som tar emot en strängutdata och formaterar strängen och visar alla tecken i strängen som versaler.

Så i exemplet nedan, om värdet på variabeln 'TutorialName' är 'AngularJS', kommer utdata från uttrycket nedan att vara 'ANGULARJS'.

{{ TutorialName | uppercase }}

I det här avsnittet kommer vi att titta närmare på hur filtren orderBy och versaler kan användas i tabeller.

Vanliga AngularJS-filter som används med tabeller

Tabellen nedan jämför de filter som används oftast i ett ng-repeat-uttryck.

Filtrera Syfte Exempelvis
beställ efter Sorterar rader efter en nyckel | orderBy : 'Name'
filtrera Behåller matchande rader | filter : searchText
versaler Storiserar texten | uppercase
små bokstäver Sänker texten | lowercase
gränsTill Antal rader med versaler | limitTo : 25
valutan Formaterar pengar | currency : '$'
datum Formaterar datum | date : 'dd MMM yyyy'
antal Ställer in decimaler | number : 2

Sortering är det filter som läsarna frågar efter först, så orderBy-filtret kommer härnäst.

Sortera tabell med OrderBy-filter

Det här filtret används för att sortera tabellen baserat på en av tabellkolumnerna. I föregående exempel såg utdata för våra AngularJS-tabelldata ut enligt nedan.

controllers Styrenheter i aktion
Modeller Modeller och bindande data
instruktioner Direktivens flexibilitet

Låt oss titta på ett exempel på hur vi kan använda filtret "orderBy" och sortera AngularJS-tabelldata med hjälp av den första kolumnen i tabellen.

Sortera tabell 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 Förklaring

  1. Vi använder samma kod som vi gjorde för att skapa vår tabell, den enda skillnaden den här gången är att vi använder "orderBy"-filtret tillsammans med ng-repeat-direktivet. I det här fallet säger vi att vi vill beställa bordet med nyckeln "Namn".

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion

Sortera tabell med OrderBy-filter

Från utgången,

  • Vi kan se att informationen i AngularJS-tabellen har sorterats enligt informationen i den första kolumnen. Arrayen deklareras i ordningen Controllers, Models, Directives, så utan filter visas raderna i den ordningen. orderBy : 'Name' ordnar namnvärdena alfabetiskt, vilket flyttar direktiv före modeller och producerar styrenheter, direktiv och modeller.

Sortera in Reverse och från kolumnrubriker

Filtret orderBy accepterar ett andra argument. Skicka true vänder riktningen, och om man lagrar både nyckeln och den flaggan på omfånget kan en läsare sortera om tabellen genom att klicka på en rubrik, eftersom beställMed referens 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>

Ordningen ändrar radernas ordning. Nästa filter ändrar hur en enskild kolumn läses.

Missa inte:

Displaytabell med versalfilter

Vi kan också använda versalfiltret för att ändra data i AngularJS-tabellen till versaler.

Låt oss ta en titt på ett exempel på hur vi kan uppnå detta.

Displaytabell med versalfilter

<!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 Förklaring

  1. Vi använder samma kod som vi gjorde för att skapa vår tabell, den enda skillnaden den här gången är att vi använder filtret med versaler. Vi använder detta filter tillsammans med "ptutor.Name" så att all text i den första kolumnen kommer att visas med versaler.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion

Displaytabell med versalfilter

Från utgången,

  • Vi kan se att genom att använda filtret "versaler" visas all data i den första kolumnen med versaler.

Att formatera en kolumn är användbart, och läsare vill ofta ha ett radnummer bredvid den.

Visa tabellindexet ($index)

För att visa tabellindexet, lägg till en med $index.

Låt oss ta en titt på ett exempel på hur vi kan uppnå detta.

Visa tabellindex

<!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 Förklaring

  1. Vi använder samma kod som vi gjorde för att skapa vår tabell, den enda skillnaden den här gången är att vi lägger till en extra rad i vår tabell för att visa indexkolumnen. I denna extra kolumn använder vi egenskapen "$index" tillhandahålls av AngularJS och sedan använda +1-operatorn för att öka indexet för varje rad.

Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.

Produktion

Visa tabellindex

Från utgången,

  • Du kan se att ytterligare en kolumn har skapats. I den här kolumnen kan vi se vilka index som skapas för varje rad.

Tre rader får plats på en skärm. En realistisk datamängd gör det inte, så läsarna behöver ett sätt att söka i den.

Så här filtrerar och söker du i AngularJS-tabelldata

AngularJS levererar ett filter med namnet filterPlacerad efter ng-repeat jämför den varje element i arrayen med ett värde och behåller endast de rader som matchar. Bind det värdet till en textruta med ng-model och tabellen begränsar sig själv medan läsaren skriver, utan händelsehanterare och ingen kontrollkod.

Lägg till en livesökning Box

Lägg till en indata ovanför tabellen och skicka arrayen genom filtret. De två delar samma scope-egenskap, så AngularJS omvärderar uttrycket vid varje tangenttryckning.

<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 Förklaring:

  1. Inmatningen skriver vad som än skrivs in searchText på omfattningen.
  2. filter : searchText behåller rader vars namn eller Description innehåller den delsträngen, utan att växla mellan gemener och versaler.
  3. För att söka i en enskild kolumn istället, skicka ett objekt: filter : {Name : searchText}.
  4. Filterkedjan, så | filter : searchText | orderBy : 'Name' söker först och sorterar sedan de överlevande.

Håll stora bord responsiva

Ett vanligt problem som uppstår under utveckling med AngularJS-tabeller är en stor datamängd som innehåller tusen rader eller fler. ng-upprepa Direktivet skapar ett scope och en watcher per rad, så att sidan kan sluta svara. Sprid ut raderna över sidorna istället och lägg till track by så befintliga rader återanvänds snarare än ombyggs.

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

Vanliga frågor

ng-repeat behöver en unik nyckel för varje rad. Två identiska värden ger upphov till dupliceringsfelet. Lägg till en distinkt egenskap, eller skriv track av $index så radens position blir nyckeln istället för dess värde.

Ja. Skicka en array med nycklar, till exempel orderBy: ['Namn','DescriptAngularJS sorterar på den första nyckeln och bryter sedan kopplingarna till den andra. Prefixet för en nyckel är ett minustecken för att reversera den nyckeln.

Varje ng-repeat-rad exponerar booleska värden $even och $odd. Bind en av dem med ng-class eller ng-if för att tillämpa en bakgrundsfärg, vilket producerar randiga rader utan någon extra CSS-väljare i tabellen.

Assistenter som t.ex. GitHub Copilot scaffold ng-repeat-markup snabbt, men de uppfinner fortfarande skriptsökvägar och stavar fel attribut. Verifiera varje förslag mot AngularJS-filterreferens före fartygetping.

AI-verktyg skriver om ng-repeat som ett kontrollflödesblock och flyttar filter till rör eller signaler. Eftersom Vinkel har ingen inbyggd orderBy eller filterpipe, granska varje genererad sortering och sök manuellt.

Sammanfatta detta inlägg med: