AngularJS egyéni szűrő példával

Anonim

Előfordul, hogy az Angular beépített szűrői nem felelnek meg a kimenet szűrésének szükségleteinek vagy követelményeinek. Ilyen esetben létre lehet hozni egy egyedi szűrőt, amely a kimenetet a kívánt módon továbbíthatja.

Egyéni szűrő létrehozása

Az alábbi példában átadunk egy karakterláncot a vezérlő nézetének a hatókör objektumon keresztül, de nem akarjuk, hogy a karakterlánc a jelenlegi állapotában jelenjen meg.

Biztosítani akarjuk, hogy amikor a karakterláncot megjelenítjük, átadunk egy egyéni szűrőt, amely hozzáfűz egy másik karakterláncot, és az elkészült karakterláncot megjeleníti a felhasználó számára.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Kód Magyarázat:

  1. Itt egy "Angular" karakterláncot adunk át a tutorial nevű tagváltozóban, és csatoljuk a hatókör objektumhoz.
  2. Az Angular biztosítja a szűrőszolgáltatást, amely felhasználható egyedi szűrőnk létrehozásához. A 'Demofilter' név a szűrőnknek adható.
  3. Ez a szokásos módszer az egyéni szűrő definiálására, amelyben egy függvényt adunk vissza. Ez a funkció tartalmazza az egyéni kódot az egyéni szűrő létrehozásához. Funkciónkban egy "Angular" karakterláncot veszünk át, amelyet a nézetünkből átadunk a szűrőnek, és ehhez hozzáadjuk a "Tutorial" karakterláncot.
  4. A Demofilter-t a tagváltozónkon használjuk, amelyet a vezérlő a nézetbe továbbított.

A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.

Kimenet:

A kimenetből

  • Látható, hogy egyéni szűrőnket alkalmaztuk és
  • A "Tutorial" szót a karakterlánc végén csatolták, amelyet a tag változó oktatóanyagában adtak át.

Összegzés:

Ha van olyan követelmény, amelyet a szögben definiált szűrők egyike sem teljesít, akkor létrehozhatja az egyéni szűrőt, és hozzáadhatja egyéni kódját, hogy meghatározza a kívánt kimenet típusát a szűrőből.