| samen met de sleutelwaardeparen (ptutor.Name en ptutor.Description) om de Angular-tabelgegevens weer te geven.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de bovenstaande output,
- We kunnen zien dat de tabel correct wordt weergegeven met de gegevens uit de reeks sleutel-waardeparen die in de controller zijn gedefinieerd.
- De tabelgegevens zijn gegenereerd door elk van de sleutel / waarde-paren te doorlopen met behulp van de "ng-repeat-instructie".
AngularJS ingebouwd filter
Het is heel gebruikelijk om de ingebouwde filters in AngularJS te gebruiken om de manier waarop de gegevens in de tabellen worden weergegeven, te wijzigen. We hebben filters al in actie gezien in een eerder hoofdstuk. Laten we een korte samenvatting van de filters hebben voordat we verder gaan.
In Angular.JS worden filters gebruikt om de waarde van expressie op te maken voordat deze aan de gebruiker wordt weergegeven. Een voorbeeld van een filter is het filter 'hoofdletters' dat een stringuitvoer aanneemt en de string opmaakt en alle tekens in de string als hoofdletters weergeeft.
Dus in het onderstaande voorbeeld, als de waarde van de variabele 'TutorialName' 'AngularJS' is, is de uitvoer van de onderstaande expressie 'ANGULARJS'.
{{TurotialName | hoofdletters}}
In deze sectie zullen we nader bekijken hoe de filters orderBy en hoofdletters in tabellen kunnen worden gebruikt.
Sorteer de tabel met OrderBy-filter
Dit filter wordt gebruikt om de tabel te sorteren op basis van een van de tabelkolommen. In het vorige voorbeeld verscheen de uitvoer voor onze Angular-tabelgegevens zoals hieronder weergegeven.
| Controllers | Controllers in actie |
| Modellen | Modellen en bindende gegevens |
| Richtlijnen | Flexibiliteit van richtlijnen |
Laten we naar een voorbeeld kijken, hoe we het "orderBy" -filter kunnen gebruiken en de Angular-tabelgegevens kunnen sorteren met behulp van de eerste kolom in de tabel.
Event Registration
Guru99 Global Event
| {{ptutor.Name}} | {{ptutor.Description}} |
Code Verklaring:
- We gebruiken dezelfde code als voor het maken van onze tabel, het enige verschil is dit keer dat we het filter "orderBy" gebruiken samen met de instructie ng-repeat. In dit geval zeggen we dat we de tafel willen bestellen met de sleutel "Naam".
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- We kunnen zien dat de gegevens in de hoektabel 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.
Tafel met hoofdletters filter weergeven
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.
Event Registration
Guru99 Global Event
| {{ptutor.Name | uppercase}} | {{ptutor.Description}} |
Code Verklaring:
- We gebruiken dezelfde code als voor het maken van onze tabel, het enige verschil is dit keer dat we het filter voor hoofdletters 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 met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- We kunnen zien dat door het filter "hoofdletters" te gebruiken, alle gegevens in de eerste kolom worden weergegeven met hoofdletters.
Geef de tabelindex weer ($ index)
Om de tabelindex weer te geven, voegt u een | 
