AngularJS-tabel: sorteren met orderBy en filteren op hoofdletters

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.

In dit hoofdstuk bekijken we hoe we dit kunnen bereiken. We zullen ook zien hoe we de filters `orderBy` en `uppercase` kunnen gebruiken, samen met het `$index` attribuut, om de indexen van AngularJS-tabellen weer te geven. De eerste stap is de markup zelf.

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 tabellen in AngularJS kunnen implementeren.
In dit voorbeeld

We gaan een AngularJS-tabel maken met daarin de 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.

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 van de vereisten is dat onze AngularJS-tabel een doorlopende rand moet hebben.
• Ten tweede moet er opvulling (padding) worden toegevoegd aan de gegevens in onze AngularJS-tabel.

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

<!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 gegevens van de AngularJS-tabel weer te geven.

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

uitgang

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

De onbewerkte rijen zijn slechts het uitgangspunt, want filters bepalen hoe die rijen worden gesorteerd en opgemaakt.

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 AngularJS 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 tekenreeks als uitvoer krijgt, deze opmaakt en alle tekens in de tekenreeks 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.

{{ TutorialName | uppercase }}

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

Veelgebruikte AngularJS-filters voor tabellen

De onderstaande tabel vergelijkt de filters die het vaakst worden gebruikt binnen een ng-repeat-expressie.

Sorteren is het filter waar lezers als eerste om vragen, dus het orderBy-filter komt daarna.

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 AngularJS-tabelgegevens er als volgt uit.

Laten we eens kijken naar een voorbeeld van hoe we het filter "orderBy" kunnen gebruiken om de gegevens in een AngularJS-tabel te sorteren op basis van de eerste kolom in de 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 | 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

Van de uitvoer,

• We kunnen zien dat de gegevens in de AngularJS-tabel zijn gesorteerd op basis van de gegevens in de eerste kolom. De array is gedeclareerd in de volgorde Controllers, Models, Directives, dus zonder filter verschijnen de rijen in die volgorde. orderBy : 'Name' De Name-waarden worden alfabetisch gerangschikt, waardoor Directives vóór Models komen te staan ​​en de volgende volgorde ontstaat: Controllers, Directives, Models.

Sorteren in Reverse en vanuit kolomkoppen

Het orderBy-filter accepteert een tweede argument. Doorgeven true Dit keert de richting om, en door zowel de sleutel als die vlag in de scope op te slaan, kan een lezer de tabel opnieuw sorteren door op een kolomkop te klikken, zoals de bestellen op basis van referentie beschrijft.

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

Sorteren verandert de volgorde van de rijen. Het volgende filter verandert hoe een enkele kolom wordt weergegeven.

Tabel weergeven met hoofdletterfilter

We kunnen ook het filter voor hoofdletters gebruiken om de gegevens in de AngularJS-tabel naar hoofdletters om te zetten.

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

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

Van de uitvoer,

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

Het opmaken van een kolom is handig, en lezers willen vaak een rijnummer ernaast zien.

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.

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

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.

Drie rijen passen op één scherm. Een realistische dataset past daar niet op, dus lezers hebben een manier nodig om erin te zoeken.

Hoe filter en zoek je in tabelgegevens in AngularJS?

AngularJS levert een filter mee met de naam filterDeze functie, die na `ng-repeat` wordt geplaatst, vergelijkt elk item in de array met een waarde en behoudt alleen de rijen die overeenkomen. Koppel die waarde aan een tekstvak met `ng-model` en de tabel wordt automatisch smaller terwijl de gebruiker typt, zonder eventhandler of controllercode.

Voeg een live zoekopdracht toe Box

Voeg een invoerveld boven de tabel toe en leid de array door het filter. De twee delen dezelfde scope-eigenschap, waardoor AngularJS de expressie bij elke toetsaanslag opnieuw evalueert.

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

1. Het invoerveld schrijft alles wat erin wordt getypt. searchText op de richtkijker.
2. filter : searchText behoudt rijen waarvan de naam of Description bevat die substring, ongeacht het hoofdlettergebruik.
3. Om in plaats daarvan in één kolom te zoeken, geeft u een object door: filter : {Name : searchText}.
4. Filterketen, dus | filter : searchText | orderBy : 'Name' Eerst worden de overlevenden doorzocht en vervolgens gesorteerd.

Zorg ervoor dat grote tabellen responsief blijven.

Een veelvoorkomend probleem bij de ontwikkeling met AngularJS-tabellen is een grote dataset met duizend rijen of meer. ng-herhalen Deze instructie creëert een scope en een watcher per rij, waardoor de pagina niet meer reageert. Verdeel de rijen in plaats daarvan over meerdere pagina's en voeg ze toe. track by De bestaande rijen worden dus hergebruikt in plaats van opnieuw opgebouwd.

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

Veelgestelde vragen