AngularJS-tabell: Sortering, Sortering efter och versaler [Exempel]

By: James Hartman James Hartman
Hours Uppdaterad

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

Tabeller i HTML är designade med 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 uppnår detta under detta kapitel. Vi kommer också att titta på hur vi kan använda filtren orderby och versaler tillsammans med att använda $index-attributet för att visa Angular-tabellindex.

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 Angular-tabeller.
I detta exempel,

Vi kommer att skapa en Angular-tabell som kommer att ha 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 solid gräns för vårt Angular bord och
  • För det andra är att det bör finnas utfyllnad för våra Angular-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>

Kodfö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 vinkeltabelldata.

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

RELATERADE ARTIKLAR

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 Angular.JS används filter för att formatera uttryckets värde innan det visas för användaren. Ett exempel på ett filter är filtret 'versaler' som tar på sig en strängutgång 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'.

{{ TurotialName | uppercase }}

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

Sortera tabell med OrderBy-filter

Detta filter används för att sortera tabellen baserat på en av tabellkolumnerna. I det föregående exemplet såg utdata för vår vinkeltabellsdata ut som visas 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 "orderBy"-filtret och sortera Angular-tabelldata med 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>

Kodfö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 data i Angular-tabellen har sorterats enligt data i den första kolumnen. I vår datauppsättning kommer "Directives"-data från "Models"-data, men eftersom vi tillämpade orderBy-filtret sorteras tabellerna därefter.

Displaytabell med versalfilter

Vi kan också använda versalfiltret för att ändra data i Angular-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>

Kodfö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.

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>

Kodfö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.

Sammanfattning

  • Tabellstrukturer skapas med hjälp av standardtaggar som finns tillgängliga inom html. Data i tabellen fylls i med "ng-repeat"-direktivet.
  • OrderBy-filtret kan användas för att sortera tabellen baserat på valfri kolumn i tabellen.
  • Filtret med versaler kan användas för att visa data i valfri textbaserad kolumn med versaler.
  • Egenskapen "$index" kan användas för att skapa ett index för tabellen.
  • Ett vanligt problem som uppstår under utveckling med AngularJS.JS-tabeller är implementeringen av stora datamängder som har 1000+ rader med data. Ibland ng-upprepa direktiv kan bli icke-responsivt, och därför blir hela sidan inte svarar ibland. I ett sådant fall är det alltid bättre att ha paginering där raderna med data är spridda över flera sidor.

Du kanske gillar: