Wat is filter in AngularJS?
Een filter in AngularJS helpt bij het opmaken van de waarde van een uitdrukking voor weergave aan de gebruiker zonder het oorspronkelijke formaat te wijzigen. Als u uw tekenreeks bijvoorbeeld in kleine letters of hoofdletters wilt, kunt u dit doen met filters. Er zijn ingebouwde filters zoals 'kleine letters', 'hoofdletters', die de uitvoer van kleine letters en hoofdletters dienovereenkomstig kunnen ophalen.
Evenzo kunt u voor getallen andere filters gebruiken.
Tijdens deze tutorial zullen we de verschillende standaard ingebouwde filters zien die beschikbaar zijn in Angular.
In deze tutorial leer je-
- Filter voor kleine letters in AngularJS
- Hoofdletters filter in AngularJS
- Nummerfilter in AngularJS
- Valutafilter in AngularJS
- JSON-filter in AngularJS
Filter voor kleine letters in AngularJS
Dit filter neemt de uitvoer van een string over en maakt de string op en geeft alle tekens in de string als kleine letters weer.
Laten we eens kijken naar een voorbeeld van AngularJS-filters met de AngularJS-tolowercase-optie.
In het onderstaande voorbeeld zullen we een controller gebruiken om een string naar een view te sturen via het scope-object. We zullen dan een filter in de weergave gebruiken om de tekenreeks naar kleine letters te converteren.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Code Verklaring:
- Hier geven we een string door, die een combinatie is van kleine letters en hoofdletters in een lidvariabele genaamd "tutorialName" en deze koppelen aan het scope-object. De waarde van de string die wordt doorgegeven is "AngularJS".
- We gebruiken de lidvariabele "tutorialName" en plaatsen een filtersymbool (|), wat betekent dat de uitvoer moet worden gewijzigd door een filter te gebruiken. Vervolgens gebruiken we het trefwoord in kleine letters om te zeggen dat we het ingebouwde filter gebruiken om de hele string in kleine letters uit te voeren.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output
- Het is te zien dat de string "AngularJS" die werd doorgegeven in de variabele tutorialName die een combinatie was van kleine letters en hoofdletters, is uitgevoerd.
- Na uitvoering is de uiteindelijke uitvoer in kleine letters, zoals hierboven weergegeven.
Hoofdletters filter in AngularJS
Dit filter is vergelijkbaar met het filter voor kleine letters; het verschil is dat het een tekenreeksuitvoer aanneemt en de tekenreeks opmaakt en alle tekens in de tekenreeks als hoofdletters weergeeft.
Laten we eens kijken naar een voorbeeld van filter AngularJS met hoofdletters en kleine letters.
In het onderstaande AngularJS-voorbeeld met hoofdletters gebruiken we een controller om een string naar een weergave te sturen via het scope-object. We zullen dan een filter in de weergave gebruiken om de tekenreeks naar hoofdletters te converteren.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Code Verklaring:
- Hier geven we een string door die een combinatie is van kleine letters en hoofdletters "Angular JS" in een lidvariabele genaamd "tutorialName" en deze koppelen aan het scope-object.
- We gebruiken de lidvariabele "tutorialName" en plaatsen een filtersymbool (|), wat betekent dat de uitvoer moet worden gewijzigd door een filter te gebruiken. Vervolgens gebruiken we het hoofdletterzoekwoord om te zeggen dat we het ingebouwde filter moeten gebruiken om de hele tekenreeks in hoofdletters uit te voeren.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- Het is duidelijk dat de string die werd doorgegeven in de variabele tutorialName, die een combinatie was van kleine letters en hoofdletters, volledig in hoofdletters is weergegeven.
Nummerfilter in AngularJS
Dit filter maakt een getal op en kan een limiet toepassen op het aantal decimalen voor een getal.
Laten we eens kijken naar een voorbeeld van AngularJS-filters met de nummeroptie.
In het onderstaande voorbeeld
We wilden laten zien hoe we het nummerfilter kunnen gebruiken om een getal op te maken voor weergave met een beperking van 2 decimalen.
We zullen een controller gebruiken om via het scoopobject een nummer naar een weergave te sturen. We zullen dan een filter in de weergave gebruiken om het nummerfilter toe te passen.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Code Verklaring:
- Hier geven we een getal door met een groter aantal decimalen in een lidvariabele genaamd tutorialID en koppelen deze aan het scope-object.
- We gebruiken de lidvariabele tutorialID en plaatsen een filtersymbool (|) samen met het nummerfilter. Nu in nummer: 2, de twee geven aan dat het filter het aantal decimalen moet beperken tot 2.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- Het is te zien dat het aantal dat werd doorgegeven in de variabele tutorialID die een groot aantal decimalen had, beperkt is tot 2 decimalen vanwege het aantal: 2 filters die werden toegepast.
Valutafilter in AngularJS
Dit filter formatteert een valutafilter naar een getal.
Stel dat als u een getal met een valuta zoals $ wilt weergeven, dit filter kan worden gebruikt.
In het onderstaande voorbeeld zullen we een controller gebruiken om een nummer naar een view te sturen via het scope-object. We zullen dan een filter in de weergave gebruiken om het huidige filter toe te passen.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Code Verklaring:
- Hier geven we een nummer door in een lidvariabele genaamd tutorialprice en koppelen deze aan het scope-object.
- We gebruiken de lidvariabele tutorialprice en plaatsen een filtersymbool (|) samen met het valutafilter. Merk op dat de valuta die wordt toegepast afhankelijk is van de taalinstellingen die op de machine worden toegepast.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output
- Te zien is dat het valutasymbool is toegevoegd aan het getal dat is doorgegeven in de variabele lesprijs.
- In ons geval, aangezien de taalinstellingen Engels (Verenigde Staten) zijn, wordt het $ -symbool als valuta ingevoegd.
JSON-filter in AngularJS
Dit filter formatteert een JSON-achtige invoer en past het AngularJS JSON-filter toe om de uitvoer in JSON te geven.
In het onderstaande voorbeeld zullen we een controller gebruiken om een JSON-type object naar een view te sturen via het scope-object. We zullen dan een filter in de weergave gebruiken om het JSON-filter toe te passen.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Code Verklaring:
- Hier geven we een nummer door in een lidvariabele genaamd "tutorial" en koppelen het aan het scope-object. Deze lidvariabele bevat een JSON-tekenreeks van Tutorial ID: 12 en TutorialName: "Angular".
- We gebruiken de tutorial met lidvariabelen en plaatsen een filtersymbool (|) samen met het JSON-filter.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
Van de output,
- Het is te zien dat de JSON als een string wordt geparseerd en een correct JSON-object in de browser wordt weergegeven.
Overzicht:
- Filters worden gebruikt om de manier waarop de uitvoer aan de gebruiker wordt weergegeven, te wijzigen.
- Angular biedt ingebouwde filters zoals de filters voor kleine letters en hoofdletters om de uitvoer van strings te wijzigen in respectievelijk kleine letters en hoofdletters.
- Er is ook een voorziening voor het wijzigen van de manier waarop cijfers worden weergegeven door het nummerfilter te gebruiken door het aantal decimale punten op te geven dat in het nummer moet worden weergegeven.
- Men kan ook het valutafilter gebruiken om het valutasymbool aan een willekeurig getal toe te voegen.
- Als er een vereiste is om json-specifieke uitvoer te hebben, biedt angular ook het JSON-filter voor het filteren van elke JSON-achtige tekenreeks in JSON-indeling.