Soms kunnen de ingebouwde filters in Angular niet voldoen aan de behoeften of vereisten voor het filteren van uitvoer. In zo'n geval kan er een custom filter gemaakt worden die de output op de gewenste manier kan passeren.
Hoe u een aangepast filter kunt maken
In het onderstaande voorbeeld gaan we een string doorgeven aan de view van de controller via het scope-object, maar we willen niet dat de string wordt weergegeven zoals hij is.
We willen ervoor zorgen dat wanneer we de tekenreeks weergeven, we een aangepast filter doorgeven dat een andere tekenreeks toevoegt en de voltooide tekenreeks aan de gebruiker weergeeft.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | Demofilter}}
Code Verklaring:
- Hier geven we een string "Angular" door in een lidvariabele genaamd tutorial en koppelen deze aan het scope-object.
- Angular biedt de filterservice die kan worden gebruikt om onze aangepaste filter te maken. De 'Demofilter' is een naam die aan ons filter is gegeven.
- Dit is de standaardmanier waarop een aangepast filter wordt gedefinieerd waarin een functie wordt geretourneerd. Deze functie bevat de aangepaste code om het aangepaste filter te maken. In onze functie nemen we een string "Angular" die van onze weergave naar het filter wordt doorgegeven en voegen we hier de string "Tutorial" aan toe.
- We gebruiken onze Demofilter op onze ledenvariabele die is doorgegeven van de controller naar de weergave.
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 ons aangepaste filter is toegepast en
- Het woord 'Tutorial' is toegevoegd aan het einde van de string, die werd doorgegeven in de tutorial met lidvariabelen.
Overzicht:
Als er een vereiste is waaraan niet wordt voldaan door een van de filters die zijn gedefinieerd in hoekig, dan kunt u uw aangepaste filter maken en uw aangepaste code toevoegen om het type uitvoer dat u van het filter wilt, te bepalen.