AngularJS-tabell: sortering, rekkefølge etter og store bokstaver [Eksempler]

by: James Hartman James Hartman
Hours oppdatert

Tabeller er et av de vanlige elementene som brukes i HTML når du arbeider med nettsider.

Tabeller i HTML er laget med HTML-taggen

  1. tag – Dette er hovedkoden som brukes for å vise tabellen.
  2. – Denne taggen brukes til å skille radene i tabellen.
  3. – Denne taggen brukes til å vise de faktiske tabelldataene.
  4. – Dette brukes for tabellhodedataene.

Bruke de ovennevnte tilgjengelige HTML-taggene sammen med AngularJS, kan vi gjøre det enklere å fylle ut tabelldata. Kort fortalt brukes ng-repeat-direktivet for å fylle ut tabelldata.

Vi skal se på hvordan vi kan oppnå dette i dette kapittelet. Vi vil også se på hvordan vi kan bruke filtrene orden etter og store bokstaver sammen med å bruke $index-attributtet for å vise Angular-tabellindekser.

Fyll inn og vis data i en tabell

Som vi diskuterte i introduksjonen til dette kapittelet, forblir grunnlaget for å lage tabellstrukturen på en HTML-side det samme.

Strukturen til tabellen er fortsatt opprettet ved å bruke de vanlige HTML-taggene til , , og . Dataene fylles imidlertid ut ved å bruke ng-repeat-direktivet i AngularJS.
La oss se på et enkelt eksempel på hvordan vi kan implementere Angular-tabeller.
I dette eksemplet,

Vi skal lage en Angular-tabell som vil ha kursemner sammen med beskrivelsene deres.

Trinn 1) Vi vil først legge til en "stil"-tag på HTML-siden vår slik at tabellen kan vises som en riktig tabell.

Fyll inn og vis data i en tabell

  1. Stiltaggen legges til HTML-siden. Dette er standardmåten for å legge til eventuelle formateringsattributter som kreves for HTML-elementer.
  2. Vi legger til to stilverdier til tabellen vår.
  • Den ene er at det skal være en solid grense for vårt Angular bord og
  • For det andre er det at det bør være polstring på plass for Angular-tabelldataene våre.

Trinn 2) Det neste trinnet er å skrive koden for å generere tabellen, og dens data.

Fyll inn og vis 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>

Kode Forklaring

  1. Vi lager først en variabel kalt "tutorial" og tildeler den noen nøkkelverdi-par i ett trinn. Hvert nøkkel-verdi-par vil bli brukt som data når tabellen vises. Opplæringsvariabelen tilordnes deretter scope-objektet slik at det kan nås fra vårt syn.
  2. Dette er det første trinnet i å lage en tabell, og vi bruker tag.
  3. For hver rad med data bruker vi "ng-repeat-direktivet". Dette direktivet går gjennom hvert nøkkelverdi-par i opplæringsomfangsobjektet ved å bruke variabelen ptutor.
  4. Til slutt bruker vi tag sammen med nøkkelverdi-parene (ptutor.Name og ptutor.Description) for å vise vinkeltabelldataene.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Produksjon

Fyll inn og vis data i en tabell

Fra utgangen ovenfor,

  • Vi kan se at tabellen vises riktig med dataene fra utvalget av nøkkelverdi-par som er definert i kontrolleren.
  • Tabelldataene ble generert ved å gå gjennom hvert av nøkkelverdi-parene ved å bruke "ng-repeat-direktivet".

RELATERTE ARTIKLER

AngularJS innebygd filter

Det er veldig vanlig å bruke de innebygde filtrene i AngularJS for å endre måten dataene vises på i tabellene. Vi har allerede sett filtre i aksjon i et tidligere kapittel. La oss få en rask oppsummering av filtrene før vi fortsetter.

I Angular.JS brukes filtre til å formatere uttrykksverdien før den vises til brukeren. Et eksempel på et filter er "store bokstaver"-filteret som tar på seg en strengutgang og formaterer strengen og viser alle tegnene i strengen som store bokstaver.

Så i eksemplet nedenfor, hvis verdien av variabelen 'TutorialName' er 'AngularJS', vil utgangen av uttrykket nedenfor være 'ANGULARJS'.

{{ TurotialName | uppercase }}

I denne delen skal vi se på hvordan filtrene orderBy og store bokstaver kan brukes i tabeller mer detaljert.

Sorter tabell med OrderBy-filter

Dette filteret brukes til å sortere tabellen basert på en av tabellkolonnene. I forrige eksempel så utdataene for vinkeltabelldataene våre ut som vist nedenfor.

Controllers Kontrollere i aksjon
Modeller Modeller og bindingsdata
Direktiver Fleksibilitet i direktiver

La oss se på et eksempel på hvordan vi kan bruke "orderBy"-filteret og sortere Angular-tabelldataene ved å bruke den første kolonnen i tabellen.

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

Kode Forklaring

  1. Vi bruker den samme koden som vi gjorde for å lage tabellen vår, den eneste forskjellen denne gangen er at vi bruker "orderBy"-filteret sammen med ng-repeat-direktivet. I dette tilfellet sier vi at vi ønsker å bestille bordet med tasten "Navn".

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Produksjon

Sorter tabell med OrderBy-filter

Fra utgangen,

  • Vi kan se at dataene i Angular-tabellen er sortert i henhold til dataene i den første kolonnen. I datasettet vårt kommer "Directives"-dataene fra "Models"-dataene, men fordi vi brukte OrderBy-filteret, blir tabellene sortert deretter.

Visningstabell med filter for store bokstaver

Vi kan også bruke filteret for store bokstaver til å endre dataene i Angular-tabellen til store bokstaver.

La oss ta en titt på et eksempel på hvordan vi kan oppnå dette.

Visningstabell med filter for store bokstaver

<!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 bruker den samme koden som vi gjorde for å lage tabellen vår, den eneste forskjellen denne gangen er at vi bruker filteret med store bokstaver. Vi bruker dette filteret sammen med "ptutor.Name" slik at all teksten i den første kolonnen vises med store bokstaver.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Produksjon

Visningstabell med filter for store bokstaver

Fra utgangen,

  • Vi kan se at ved å bruke "store bokstaver"-filteret, vises alle dataene i den første kolonnen med store bokstaver.

Vis tabellindeksen ($index)

For å vise tabellindeksen, legg til en med $indeks.

La oss ta en titt på et eksempel på hvordan vi kan oppnå dette.

Vis tabellindeksen

<!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 bruker den samme koden som vi gjorde for å lage tabellen vår, den eneste forskjellen denne gangen er at vi legger til en ekstra rad i tabellen for å vise indekskolonnen. I denne ekstra kolonnen bruker vi egenskapen "$index" levert av AngularJS og deretter bruke +1-operatoren til å øke indeksen for hver rad.

Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Produksjon

Vis tabellindeksen

Fra utgangen,

  • Du kan se at en ekstra kolonne er opprettet. I denne kolonnen kan vi se indeksene som opprettes for hver rad.

Sammendrag

  • Tabellstrukturer opprettes ved å bruke standardkodene som er tilgjengelige innenfor HTML. Dataene i tabellen fylles ut ved å bruke "ng-repeat"-direktivet.
  • OrderBy-filteret kan brukes til å sortere tabellen basert på hvilken som helst kolonne i tabellen.
  • Filteret for store bokstaver kan brukes til å vise dataene i en hvilken som helst tekstbasert kolonne med store bokstaver.
  • Egenskapen "$index" kan brukes til å lage en indeks for tabellen.
  • Et vanlig problem som oppstår under utvikling med AngularJS.JS-tabeller er implementeringen av store datasett som har 1000+ rader med data. Noen ganger ng-gjenta direktivet kan bli ikke-responsivt, og dermed blir hele siden til tider ikke-responsiv. I et slikt tilfelle er det alltid bedre å ha paginering der radene med data er spredt over flere sider.