AngularJS-tabel: sortering, rækkefølge efter og store bogstaver [Eksempler]

Af: James Hartman James Hartman
Hours Opdateret

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 filtrene orderby og store bogstaver sammen med at bruge $index-attributten til at vise Angular tabelindekser.

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 Angular-tabeller.
I dette eksempel

Vi skal lave en Angular tabel, som vil have 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 grænse for vores Angular bord og
  • Det andet er, at der skal være polstring på plads til vores Angular 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>

Kode 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 vinkeltabeldataene.

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

RELATEREDE ARTIKLER

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 Angular.JS bruges filtre til at formatere værdien af ​​udtryk, før det vises for brugeren. Et eksempel på et filter er filteret 'store bogstaver', som 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'.

{{ TurotialName | uppercase }}

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

Sorter tabel med OrderBy-filter

Dette filter bruges til at sortere tabellen baseret på en af ​​tabelkolonnerne. I det foregående eksempel så outputtet for vores Angular 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 "orderBy"-filteret og sortere Angular 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>

Kode 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 Angular-tabellen er blevet sorteret i henhold til dataene i den første kolonne. I vores datasæt kommer "Directives"-dataene fra "Models"-dataene, men fordi vi har anvendt orderBy-filteret, bliver tabellerne sorteret i overensstemmelse hermed.

Displaytabel med filter med store bogstaver

Vi kan også bruge filteret til store bogstaver til at ændre dataene i Angular-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>

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

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>

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

Resumé

  • Tabelstrukturer oprettes ved hjælp af de tilgængelige standard-tags HTML. Dataene i tabellen er udfyldt ved hjælp af "ng-repeat"-direktivet.
  • OrderBy-filteret kan bruges til at sortere tabellen baseret på en hvilken som helst kolonne i tabellen.
  • Filteret med store bogstaver kan bruges til at vise dataene i enhver tekstbaseret kolonne med store bogstaver.
  • Egenskaben "$index" kan bruges til at oprette et indeks for tabellen.
  • Et almindeligt problem, man støder på under udvikling med AngularJS.JS-tabeller, er implementeringen af ​​store datasæt, som har 1000+ rækker af data. Nogle gange ng-gentag direktiv kan blive ikke-responsivt, og derfor bliver hele siden til tider ikke-responsiv. I et sådant tilfælde er det altid bedre at have paginering, hvor rækkerne af data er spredt over flere sider.

Du kan lide: