Filtru personalizat AngularJS cu exemplu

Anonim

Uneori, filtrele încorporate din Angular nu pot satisface nevoile sau cerințele pentru filtrarea ieșirii. Într-un astfel de caz, poate fi creat un filtru personalizat care poate transmite ieșirea în maniera necesară.

Cum se creează un filtru personalizat

În exemplul de mai jos vom transmite un șir către vizualizarea de la controler prin intermediul obiectului scop, dar nu vrem ca șirul să fie afișat așa cum este.

Vrem să ne asigurăm că ori de câte ori afișăm șirul, trecem un filtru personalizat care va adăuga un alt șir și afișează șirul completat utilizatorului.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Explicatie cod:

  1. Aici trecem un șir „Angular” într-o variabilă membru numită tutorial și îl atașăm la obiectul scop.
  2. Angular oferă serviciul de filtrare care poate fi utilizat pentru a crea filtrul nostru personalizat. „Demofiltrul” este un nume dat filtrului nostru.
  3. Acesta este modul standard în care este definit un filtru personalizat în care este returnată o funcție. Această funcție conține codul personalizat pentru a crea filtrul personalizat. În funcția noastră, luăm un șir „Angular” care este trecut de la vizualizarea noastră la filtru și adăugăm șirul „Tutorial” la acesta.
  4. Folosim Demofilterul nostru pe variabila de membru care a fost transmisă de la controler la vizualizare.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.

Ieșire:

Din ieșire,

  • Se poate vedea că filtrul nostru personalizat a fost aplicat și
  • Cuvântul „Tutorial” a fost adăugat la sfârșitul șirului, care a fost transmis în tutorialul cu variabila membru.

Rezumat:

Dacă există o cerință care nu este îndeplinită de niciunul dintre filtrele definite în unghiular, atunci puteți crea filtrul personalizat și puteți adăuga codul personalizat pentru a determina tipul de ieșire pe care îl doriți din filtru.