Prilagođeni filtar AngularJS s primjerom

Anonim

Ponekad ugrađeni filtri u programu Angular ne mogu zadovoljiti potrebe ili zahtjeve za filtriranjem rezultata. U takvom slučaju može se stvoriti prilagođeni filtar koji može proslijediti izlaz na traženi način.

Kako stvoriti prilagođeni filtar

U donjem primjeru prenijet ćemo niz u pogled od kontrolera putem objekta opsega, ali ne želimo da se niz prikazuje takav kakav jest.

Želimo osigurati da svaki put kada prikažemo niz, proslijedimo prilagođeni filtar koji će dodati drugi niz i prikazati dovršeni niz korisniku.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Objašnjenje koda:

  1. Ovdje prenosimo niz "Angular" u varijablu člana koja se naziva tutorial i pričvršćujemo je na objekt opsega.
  2. Angular pruža uslugu filtriranja koja se može koristiti za stvaranje našeg prilagođenog filtra. "Demofilter" je naziv koji je dodijeljen našem filtru.
  3. Ovo je standardni način na koji se definira prilagođeni filtar u kojem se vraća funkcija. Ova funkcija sadrži prilagođeni kôd za stvaranje prilagođenog filtra. U našoj funkciji uzimamo niz "Kutni" koji se iz našeg pogleda prosljeđuje filtru i dodamo mu niz "Vodič".
  4. Koristimo naš Demofilter na našoj varijabli člana koja je prenesena s kontrolera na pogled.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku.

Izlaz:

Iz rezultata,

  • Vidi se da je primijenjen naš prilagođeni filtar i
  • Riječ "Tutorial" dodana je na kraju niza, koji je proslijeđen u tutorialu varijable člana.

Sažetak:

Ako postoji zahtjev koji ne zadovoljava niti jedan filtar definiran u angular, tada možete stvoriti svoj prilagođeni filtar i dodati svoj prilagođeni kôd kako biste odredili vrstu izlaza koji želite iz filtra.a