Filter AngularJS po meri s primerom

Anonim

Včasih vgrajeni filtri v programu Angular ne morejo zadostiti potrebam ali zahtevam za izhod filtriranja. V takem primeru je mogoče ustvariti filter po meri, ki lahko poda izhod na zahtevan način.

Kako ustvariti filter po meri

V spodnjem primeru bomo podali niz pogledu iz krmilnika prek predmeta obsega, vendar ne želimo, da se niz prikaže takšen, kot je.

Zagotoviti želimo, da vsakič, ko prikažemo niz, posredujemo filter po meri, ki bo uporabniku dodal še en niz in dokončal niz.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Razlaga kode:

  1. Tu posredujemo niz "Angular" v spremenljivko člana, imenovano tutorial, in jo pritrdimo na objekt obsega.
  2. Angular ponuja storitev filtriranja, ki jo lahko uporabimo za izdelavo našega filtra po meri. "Demofilter" je ime, ki ga dobi naš filter.
  3. To je standardni način definiranja filtra po meri, pri katerem se vrne funkcija. Ta funkcija vsebuje kodo po meri za ustvarjanje filtra po meri. V naši funkciji jemljemo niz "Angular", ki ga iz našega pogleda prenesemo v filter in temu dodamo niz "Tutorial".
  4. Naš demofilter uporabljamo na spremenljivki člana, ki je bila posredovana iz krmilnika v pogled.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod.

Izhod:

Iz rezultata,

  • Vidimo, da je bil uporabljen naš filter po meri in
  • Na koncu niza je bila dodana beseda "Vadnica", ki je bila posredovana v vadnici s spremenljivko člana.

Povzetek:

Če obstaja zahteva, ki je ne izpolni noben od filtrov, definiranih v angular, lahko ustvarite filter po meri in dodate kodo po meri, da določite vrsto izhoda, ki ga želite iz filtra.