AngularJS-tabel: sorteren, OrderBy en hoofdletterfilter [Voorbeelden]

Door: James Hartman James Hartman
Hours Bijgewerkt

Tabellen zijn een van de meest voorkomende elementen die in HTML worden gebruikt bij het werken met webpagina's.

Tabellen in HTML zijn ontworpen met behulp van de HTML-tag

  1. tag – Dit is de hoofdtag die wordt gebruikt voor het weergeven van de tabel.
  2. – Deze tag wordt gebruikt voor het scheiden van de rijen in de tabel.
  3. – Deze tag wordt gebruikt voor het weergeven van de feitelijke tabelgegevens.
  4. – Dit wordt gebruikt voor de tabelkopgegevens.

Gebruik de hierboven beschikbare HTML-tags samen met angularjs, kunnen we het eenvoudiger maken om tabelgegevens in te vullen. Kortom, de ng-repeat-richtlijn wordt gebruikt om tabelgegevens in te vullen.

Hoe we dit kunnen bereiken, bekijken we in dit hoofdstuk. We zullen ook bekijken hoe we de orderby- en hoofdletterfilters kunnen gebruiken, samen met het gebruik van het $index-attribuut om Angular-tabelindexen weer te geven.

Gegevens invullen en weergeven in een tabel

Zoals we in de inleiding van dit hoofdstuk hebben besproken, blijft de basis voor het maken van de tabelstructuur op een HTML-pagina hetzelfde.

De structuur van de tabel wordt nog steeds gemaakt met behulp van de normale HTML-tags van , , En . De gegevens worden echter ingevuld met behulp van de ng-repeat-richtlijn in AngularJS.
Laten we eens kijken naar een eenvoudig voorbeeld van hoe we Angular-tabellen kunnen implementeren.
In dit voorbeeld

We gaan een hoekige tabel maken met cursusonderwerpen en hun beschrijvingen.

Stap 1) We gaan eerst een “style”-tag toevoegen aan onze HTML-pagina, zodat de tabel als een echte tabel kan worden weergegeven.

Gegevens invullen en weergeven in een tabel

  1. De stijltag wordt toegevoegd aan de HTML-pagina. Dit is de standaardmanier om opmaakkenmerken toe te voegen die vereist zijn voor HTML-elementen.
  2. We voegen twee stijlwaarden toe aan onze tabel.
  • Een daarvan is dat er een stevige rand moet zijn voor onze hoekige tafel en
  • Ten tweede moet er opvulling worden ingevoerd voor onze Angular-tabelgegevens.

Stap 2) De volgende stap is het schrijven van de code om de tabel en de bijbehorende gegevens te genereren.

Gegevens invullen en weergeven in een 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>

Code Uitleg

  1. We maken eerst een variabele met de naam “tutorial” en wijzen deze in één stap enkele sleutel-waardeparen toe. Elk sleutel-waardepaar wordt gebruikt als gegevens bij het weergeven van de tabel. De tutorialvariabele wordt vervolgens toegewezen aan het scope-object, zodat deze vanuit onze weergave toegankelijk is.
  2. Dit is de eerste stap bij het maken van een tabel en we gebruiken de label.
  3. Voor elke rij gegevens gebruiken we de “ng-repeat-richtlijn”. Deze richtlijn doorloopt elk sleutel-waardepaar in het tutorial-scope-object met behulp van de variabele ptutor.
  4. Tenslotte maken we gebruik van de tag samen met de sleutelwaardeparen (ptutor.Name en ptutor.Description) om de hoektabelgegevens weer te geven.

Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

uitgang

Gegevens invullen en weergeven in een tabel

Uit de bovenstaande uitvoer,

  • We zien dat de tabel correct wordt weergegeven met de gegevens uit de matrix met sleutel-waardeparen die in de controller zijn gedefinieerd.
  • De tabelgegevens zijn gegenereerd door elk van de sleutel-waardeparen te doorlopen met behulp van de "ng-repeat-richtlijn".

GERELATEERDE ARTIKELEN

AngularJS ingebouwd filter

Het is heel gebruikelijk om de ingebouwde filters in AngularJS te gebruiken om de manier waarop de data in de tabellen wordt weergegeven te veranderen. We hebben filters al in actie gezien in een eerder hoofdstuk. Laten we filters kort samenvatten voordat we verdergaan.

In Angular.JS worden filters gebruikt om de waarde van een expressie te formatteren voordat deze aan de gebruiker wordt getoond. Een voorbeeld van een filter is het 'uppercase'-filter dat een string-uitvoer aanneemt en de string formatteert en alle tekens in de string als hoofdletters weergeeft.

Dus als in het onderstaande voorbeeld de waarde van de variabele 'TutorialName' 'AngularJS' is, zal de uitvoer van de onderstaande expressie 'ANGULARJS' zijn.

{{ TurotialName | uppercase }}

In deze sectie zullen we gedetailleerder bekijken hoe de filters orderBy en hoofdletters in tabellen kunnen worden gebruikt.

Sorteer tabel met OrderBy-filter

Dit filter wordt gebruikt om de tabel te sorteren op basis van een van de tabelkolommen. In het vorige voorbeeld zag de uitvoer voor onze Angular-tabelgegevens eruit zoals hieronder weergegeven.

Controllers Controleurs in actie
Modellen Modellen en bindende gegevens
instructies Flexibiliteit van richtlijnen

Laten we eens kijken naar een voorbeeld van hoe we het “orderBy”-filter kunnen gebruiken en de Angular-tabelgegevens kunnen sorteren met behulp van de eerste kolom in de tabel.

Sorteer tabel met 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 Uitleg

  1. We gebruiken dezelfde code als voor het maken van onze tabel, het enige verschil deze keer is dat we het filter "orderBy" gebruiken samen met de ng-repeat-richtlijn. In dit geval zeggen we dat we de tabel willen ordenen op basis van de sleutel "Naam".

Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

uitgang

Sorteer tabel met OrderBy-filter

Van de uitvoer,

  • We kunnen zien dat de gegevens in de Angular-tabel zijn gesorteerd volgens de gegevens in de eerste kolom. In onze dataset zijn de ‘Directives’-gegevens afkomstig van de ‘Models’-gegevens, maar omdat we het orderBy-filter hebben toegepast, worden de tabellen dienovereenkomstig gesorteerd.

Tabel weergeven met hoofdletterfilter

We kunnen ook het filter voor hoofdletters gebruiken om de gegevens in de hoektabel in hoofdletters te veranderen.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

Tabel weergeven met hoofdletterfilter

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

  1. We gebruiken dezelfde code als voor het maken van onze tabel, het enige verschil is dat we dit keer het hoofdletterfilter gebruiken. We gebruiken dit filter in combinatie met de "ptutor.Name", zodat alle tekst in de eerste kolom in hoofdletters wordt weergegeven.

Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

uitgang

Tabel weergeven met hoofdletterfilter

Van de uitvoer,

  • We kunnen zien dat door het gebruik van het “hoofdletter”-filter alle gegevens in de eerste kolom worden weergegeven met hoofdletters.

Geef de tabelindex weer ($index)

Om de tabelindex weer te geven, voegt u a toe met $index.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

Geef de tabelindex weer

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

  1. We gebruiken dezelfde code als voor het maken van onze tabel. Het enige verschil is dat we deze keer een extra rij aan onze tabel toevoegen om de indexkolom weer te geven. In deze extra kolom gebruiken we de eigenschap "$index" van AngularJS en gebruiken we vervolgens de operator +1 om de index voor elke rij te verhogen.

Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

uitgang

Geef de tabelindex weer

Van de uitvoer,

  • U kunt zien dat er een extra kolom is aangemaakt. In deze kolom kunnen we zien welke indexen voor elke rij worden gemaakt.

Samenvatting

  • Tabelstructuren worden gemaakt met behulp van de standaardtags die daarin beschikbaar zijn HTML. De gegevens in de tabel worden ingevuld met behulp van de “ng-repeat” -richtlijn.
  • Het orderBy-filter kan worden gebruikt om de tabel te sorteren op basis van elke kolom in de tabel.
  • Het hoofdletterfilter kan worden gebruikt om de gegevens in elke op tekst gebaseerde kolom in hoofdletters weer te geven.
  • De eigenschap “$index” kan worden gebruikt om een ​​index voor de tabel te maken.
  • Een veelvoorkomend probleem dat men tegenkomt tijdens de ontwikkeling van AngularJS.JS-tabellen is de implementatie van grote datasets met meer dan 1000 rijen met gegevens. Soms het ng-herhalen richtlijn kan niet meer reageren, en daarom reageert de hele pagina soms niet meer. In zo'n geval is het altijd beter om een ​​paginering te hebben waarbij de rijen met gegevens over meerdere pagina's zijn verspreid.

Je houdt misschien van: