Mukautettu AngularJS-suodatin esimerkillä

Anonim

Joskus Angularin sisäiset suodattimet eivät voi täyttää tuotoksen suodattamisen tarpeita tai vaatimuksia. Tällöin voidaan luoda mukautettu suodatin, joka välittää lähdön vaaditulla tavalla.

Kuinka luoda oma suodatin

Seuraavassa esimerkissä aiomme välittää merkkijonon ohjaimen näkymälle laajuusobjektin kautta, mutta emme halua merkkijonon näkyvän sellaisenaan.

Haluamme varmistaa, että aina kun näytämme merkkijonon, välitämme mukautetun suodattimen, joka liittää toisen merkkijonon ja näyttää valmiin merkkijonon käyttäjälle.

Event Registration

Guru99 Global Event

This tutorial is {{tutorial | Demofilter}}

Koodin selitys:

  1. Tässä välitetään merkkijono "Kulma" jäsenmuuttujassa, jota kutsutaan opetusohjelmaksi, ja liitämme sen laajuusobjektiin.
  2. Angular tarjoaa suodatinpalvelun, jota voidaan käyttää mukautetun suodattimen luomiseen. 'Demofilter' on suodattimellemme annettu nimi.
  3. Tämä on tavanomainen tapa määritellä mukautettu suodatin, jossa funktio palautetaan. Tämä toiminto sisältää mukautetun koodin mukautetun suodattimen luomiseksi. Toiminnossamme otamme merkkijonon "Kulma", joka välitetään näkymästä suodattimeen ja liitetään tähän merkkijono "Tutorial".
  4. Käytämme Demofilteria jäsenmuuttujassa, joka siirrettiin ohjaimelta näkymään.

Jos koodi suoritetaan onnistuneesti, seuraava tulos näkyy, kun suoritat koodin selaimessa.

Tuotos:

Lähdöstä

  • Voidaan nähdä, että mukautettu suodatin on käytetty ja
  • Sana 'Tutorial' on lisätty merkkijonon loppuun, joka välitettiin jäsenmuuttujan opetusohjelmassa.

Yhteenveto:

Jos jokin vaatimus, jota kulmakerroin määritelty suodatin ei täytä, voit luoda mukautetun suodattimen ja lisätä mukautetun koodin suodattimesta haluamasi ulostulotyypin määrittämiseksi. A