Vlastný filter AngularJS s príkladom

Anonim

Niekedy zabudované filtre v Angular nemôžu splniť potreby alebo požiadavky na výstup filtrovania. V takom prípade je možné vytvoriť vlastný filter, ktorý dokáže výstupom odoslať požadovaným spôsobom.

Ako vytvoriť vlastný filter

V nasledujúcom príklade odovzdáme reťazec do pohľadu z radiča cez objekt rozsahu, ale nechceme, aby sa reťazec zobrazoval taký, aký je.

Chceme zabezpečiť, aby sme pri každom zobrazení reťazca odovzdali vlastný filter, ktorý pripojí ďalší reťazec a zobrazí vyplnený reťazec používateľovi.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Vysvetlenie kódu:

  1. Tu odovzdávame reťazec „Uhlové“ v členskej premennej s názvom tutorial a pripájame ho k objektu rozsahu.
  2. Angular poskytuje službu filtrovania, ktorú je možné použiť na vytvorenie nášho vlastného filtra. „Demofilter“ je názov pre náš filter.
  3. Toto je štandardný spôsob, ako je definovaný vlastný filter, pri ktorom je vrátená funkcia. Táto funkcia obsahuje vlastný kód na vytvorenie vlastného filtra. V našej funkcii berieme reťazec „Angular“, ktorý je odovzdaný z nášho pohľadu do filtra a k tomu pripojíme reťazec „Tutorial“.
  4. Používame náš Demofilter na našu členskú premennú, ktorá bola odovzdaná z radiča do pohľadu.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je vidieť, že náš vlastný filter bol použitý a
  • Slovo „Výukový program“ bolo pridané na koniec reťazca, ktorý bol odovzdaný v príručke premennej člena.

Zhrnutie:

Ak existuje požiadavka, ktorú nespĺňa žiadny z filtrov definovaných v uhle, môžete vytvoriť svoj vlastný filter a pridať svoj vlastný kód na určenie požadovaného typu výstupu z filtra. A