Vlastní filtr AngularJS s příkladem

Anonim

Někdy integrované filtry v Angular nemohou splnit potřeby nebo požadavky na filtrování výstupu. V takovém případě lze vytvořit vlastní filtr, který předá výstup požadovaným způsobem.

Jak vytvořit vlastní filtr

V níže uvedeném příkladu předáme řetězec do pohledu z řadiče prostřednictvím objektu oboru, ale nechceme, aby se řetězec zobrazoval tak, jak je.

Chceme zajistit, že při každém zobrazení řetězce předáme vlastní filtr, který připojí další řetězec a zobrazí vyplněný řetězec uživateli.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Vysvětlení kódu:

  1. Zde předáváme řetězec „Angular“ v členské proměnné s názvem tutorial a připojujeme jej k objektu oboru.
  2. Angular poskytuje službu filtrování, kterou lze použít k vytvoření našeho vlastního filtru. „Demofilter“ je název pro náš filtr.
  3. Toto je standardní způsob, jakým je definován vlastní filtr, ve kterém je vrácena funkce. Tato funkce obsahuje vlastní kód pro vytvoření vlastního filtru. V naší funkci vezmeme řetězec „Úhlový“, který je předán z našeho pohledu do filtru a k tomu připojíme řetězec „Výukový program“.
  4. Používáme náš Demofilter na naší členské proměnné, která byla předána z řadiče do pohledu.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je vidět, že byl použit náš vlastní filtr a
  • Slovo 'Tutorial' bylo připojeno na konec řetězce, který byl předán v tutoriálu členské proměnné.

Souhrn:

Pokud existuje požadavek, který nesplňuje žádný z filtrů definovaných v úhlu, můžete vytvořit svůj vlastní filtr a přidat svůj vlastní kód k určení požadovaného typu výstupu z filtru. A