AngularJS pielāgotais filtrs ar piemēru

Anonim

Dažreiz iebūvētie Angular filtri nevar apmierināt vajadzības vai prasības izejas filtrēšanai. Šādā gadījumā var izveidot pielāgotu filtru, kas var izvadi izvadīt vajadzīgajā veidā.

Kā izveidot pielāgotu filtru

Zemāk sniegtajā piemērā mēs nodosim virkni kontroliera skatam, izmantojot sfēra objektu, taču mēs nevēlamies, lai virkne tiktu parādīta tā, kā tas ir.

Mēs vēlamies nodrošināt, ka ikreiz, kad parādīsim virkni, mēs nodosim pielāgotu filtru, kas pievienos citu virkni un parādīs pabeigto virkni lietotājam.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Koda skaidrojums:

  1. Šeit mēs nododam virkni "Leņķa" dalībnieka mainīgajā, ko sauc par apmācību, un pievienojam to darbības objekta.
  2. Angular nodrošina filtru pakalpojumu, kuru var izmantot, lai izveidotu mūsu pielāgoto filtru. 'Demofilter' ir nosaukums, kas piešķirts mūsu filtram.
  3. Tas ir standarta veids, kā tiek definēts pielāgots filtrs, kurā funkcija tiek atgriezta. Šī funkcija satur pielāgoto kodu, lai izveidotu pielāgoto filtru. Mūsu funkcijā mēs ņemam virkni "Angular", kas tiek nodota no mūsu skata filtram, un tam pievienojam virkni "Tutorial".
  4. Mēs izmantojam savu Demofilter mūsu dalībnieka mainīgajam, kas tika nodots no kontroliera skatam.

Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.

Izeja:

No izejas

  • Var redzēt, ka mūsu pielāgotais filtrs ir lietots un
  • Vārds 'Tutorial' ir pievienots virknes beigās, kas tika nodots dalībnieku mainīgo apmācībā.

Kopsavilkums:

Ja ir kāda prasība, kas neatbilst nevienam no leņķiski definētajiem filtriem, varat izveidot pielāgoto filtru un pievienot pielāgoto kodu, lai noteiktu vajadzīgo izvades veidu no filtra.