AngularJS-suodattimet ja AngularJS-muokattu suodatin esimerkillä

by: James Hartman James Hartman
Hours Päivitetty

Mikä on AngularJS:n suodatin?

A Suodatin AngularJS:ssä auttaa muotoilemaan lausekkeen arvon käyttäjälle näytettäväksi muuttamatta alkuperäistä muotoa. Jos esimerkiksi haluat merkkijonosi joko pienillä tai isoilla kirjaimilla, voit tehdä sen käyttämällä suodattimia. On sisäänrakennettuja suodattimia, kuten "pienet kirjaimet", "isot kirjaimet", jotka voivat hakea pienten ja isojen kirjainten tulosteen vastaavasti.

AngularJS mukautettu suodatin

Joskus Angularin sisäänrakennetut suodattimet eivät pysty vastaamaan lähdön suodatustarpeita tai vaatimuksia. Tällöin voidaan luoda mukautettu AngularJS-suodatin, joka voi välittää lähdön vaaditulla tavalla.

Vastaavasti numeroille voit käyttää muita suodattimia. Tämän opetusohjelman aikana näemme Angularissa saatavilla olevat erilaiset sisäänrakennetut standardisuodattimet.

Kuinka luoda mukautettu suodatin AngularJS: ssä

Alla olevassa mukautetun suodattimen AngularJS-esimerkissä välitämme merkkijonon ohjaimesta näkymään laajennusobjektin kautta, mutta emme halua, että merkkijono näytetään sellaisenaan.

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

Luo mukautettu suodatin AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Koodin selitys

  1. Tässä välitetään "Angular" -merkkijono jäsenmuuttujassa nimeltä tutorial ja liitetään se soveltamisalaobjektiin.
  2. Angular tarjoaa suodatinpalvelun, jota voidaan käyttää mukautetun suodattimen luomiseen. "Demofilter" on suodattimellemme annettu nimi.
  3. Tämä on tavallinen tapa, jolla AngularJS:n mukautetut suodattimet määritellään, jolloin funktio palautetaan. Tämä toiminto sisältää mukautetun koodin mukautetun suodattimen luomiseksi. Toiminnossamme otamme merkkijonon "Angular", joka välitetään näkymästämme suodattimelle ja liitetään tähän merkkijono "Tutorial".
  4. Käytämme Demofilteriä jäsenmuuttujassamme, joka välitettiin ohjaimesta näkymään.

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

lähtö:

Luo mukautettu suodatin AngularJS:ssä

Ulostulosta,

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

AIHEESEEN LIITTYVÄT ARTIKKELIT

Pienet kirjaimet AngularJS:ssä

Tämä suodatin ottaa merkkijonotulosteen ja muotoilee merkkijonon ja näyttää kaikki merkkijonon merkit pieninä kirjaimina.

Katsotaanpa esimerkkiä AngularJS-suodattimista, joissa on AngularJS pieniin kirjaimiin -vaihtoehto.

Alla olevassa esimerkissä käytämme ohjainta lähettämään merkkijono näkymään laajuusobjektin kautta. Käytämme sitten näkymässä olevaa suodatinta muuntaaksemme merkkijonon pieniksi kirjaimiksi.

Pienet kirjaimet AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Koodin selitys

  1. Tässä välitetään merkkijono, joka on pienten ja isojen kirjainten yhdistelmä jäsenmuuttujassa nimeltä "tutorialName", ja liitetään se soveltamisalaobjektiin. Välitettävän merkkijonon arvo on "AngularJS".
  2. Käytämme jäsenmuuttujaa "tutorialName" ja laitamme suodatinsymbolin (|), mikä tarkoittaa, että tulostetta on muokattava suodattimen avulla. Käytämme sitten pienillä kirjaimilla kirjoitettua avainsanaa sanoaksemme, että käytämme sisäänrakennettua suodatinta koko merkkijonon tulostamiseen pienillä kirjaimilla.

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

lähtö:

Pienet kirjaimet AngularJS:ssä

Lähdöstä

  • Voidaan nähdä, että merkkijono "AngularJS", joka välitettiin muuttujassa tutorialName, joka oli pienten ja isojen kirjainten yhdistelmä, on suoritettu.
  • Suorituksen jälkeen lopullinen tuloste on pienillä kirjaimilla, kuten yllä on esitetty.

Isot kirjaimet AngularJS:ssä

Tämä suodatin on samanlainen kuin pienikokoinen suodatin; ero on siinä, että se saa merkkijonotulosteen ja muotoilee merkkijonon ja näyttää kaikki merkkijonon merkit isoina kirjaimina.

Katsotaanpa esimerkkiä isoilla kirjaimilla AngularJS-suodattimesta pienillä kirjaimilla.

Alla olevassa esimerkissä AngularJS isoilla kirjaimilla käytämme ohjainta lähettääksemme merkkijonon näkymään laajuusobjektin kautta. Käytämme sitten näkymässä olevaa suodatinta muuntaaksemme merkkijonon isoiksi kirjaimiksi.

Isot kirjaimet AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Koodin selitys

  1. Tässä välitetään merkkijono, joka on yhdistelmä pieniä ja isoja merkkejä "Angular JS" jäsenmuuttujassa nimeltä "tutorialName", ja liitetään se soveltamisalaobjektiin.
  2. Käytämme jäsenmuuttujaa "tutorialName" ja laitamme suodatinsymbolin (|), mikä tarkoittaa, että tulostetta on muokattava suodattimen avulla. Käytämme sitten isoilla kirjaimilla kirjoitettua avainsanaa sanoaksemme, että käytämme sisäänrakennettua suodatinta koko merkkijonon tulostamiseen isoilla kirjaimilla.

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

lähtö:

Isot kirjaimet AngularJS:ssä

Ulostulosta,

  • Voidaan nähdä, että merkkijono, joka välitettiin muuttujassa tutorialName, joka oli pienten ja isojen kirjainten yhdistelmä, on tulostettu kaikilla isoilla kirjaimilla.

Numerosuodatin AngularJS:ssä

Tämä suodatin muotoilee luvun ja voi rajoittaa luvun desimaalipisteitä.

Katsotaanpa esimerkkiä AngularJS-suodattimista numerovaihtoehdolla.

Alla olevassa esimerkissä

Halusimme esitellä, kuinka voimme käyttää numerosuodatinta muotoilemaan numeron näytettäväksi kahden desimaalin rajoituksella.

Käytämme ohjainta lähettääksemme numeron näkymään laajennusobjektin kautta. Käytämme sitten näkymässä olevaa suodatinta numerosuodattimen käyttämiseen.

Numerosuodatin AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Koodin selitys

  1. Tässä välitetään luku, jossa on suurempi määrä desimaalipaikkoja jäsenmuuttujassa nimeltä tutorialID, ja liitetään se soveltamisalaobjektiin.
  2. Käytämme jäsenmuuttujaa tutorialID ja lisäämme suodatinsymbolin (|) numerosuodattimen kanssa. Nyt numero:2:ssa nämä kaksi osoittavat, että suodattimen tulee rajoittaa desimaalien määrä kahteen.

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

lähtö:

Numerosuodatin AngularJS:ssä

Ulostulosta,

  • Voidaan nähdä, että luku, joka välitettiin muuttujassa tutorialID, jossa oli suuri määrä desimaalipisteitä, on rajoitettu 2 desimaaliin, koska numero: 2 suodatinta, jota käytettiin.

Valuuttasuodatin AngularJS:ssä

Tämä suodatin muotoilee valuuttasuodattimen numeroksi.

Oletetaan, että jos haluat näyttää numeron valuutalla, kuten $, tätä suodatinta voidaan käyttää.

Alla olevassa esimerkissä käytämme ohjainta numeron lähettämiseen näkymään laajennusobjektin kautta. Käytämme sitten näkymässä olevaa suodatinta nykyisen suodattimen käyttämiseen.

Valuuttasuodatin AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Koodin selitys

  1. Tässä välitämme numeron jäsenmuuttujassa nimeltä tutorialprice ja liitämme sen laajuusobjektiin.
  2. Käytämme jäsenmuuttujaa tutorialprice ja lisäämme suodatinsymbolin (|) valuuttasuodattimen kanssa. Huomaa, että käytettävä valuutta riippuu koneeseen käytettävistä kieliasetuksista.

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

lähtö:

Valuuttasuodatin AngularJS:ssä

Lähdöstä

  • Näet, että valuuttasymboli on liitetty muuttujassa opetushinta välitettyyn numeroon.
  • Tässä tapauksessa, koska kieliasetukset ovat englanti (Yhdysvallat), $-symboli lisätään valuutaksi.

JSON-suodatin AngularJS:ssä

Tämä suodatin muotoilee a JSON kuten syöte ja käyttää AngularJS JSON -suodatinta antamaan tulos JSON-muodossa.

Alla olevassa esimerkissä käytämme ohjainta JSON-tyyppisen objektin lähettämiseen näkymään ulottuvuusobjektin kautta. Käytämme sitten näkymässä olevaa suodatinta JSON-suodattimen käyttämiseen.

JSON-suodatin AngularJS:ssä

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Koodin selitys

  1. Tässä välitämme numeron jäsenmuuttujassa nimeltä "tutorial" ja liitämme sen laajuusobjektiin. Tämä jäsenmuuttuja sisältää JSON-tyyppisen merkkijonon Tutorial ID:12 ja TutorialName:"Angular".
  2. Käytämme jäsenmuuttujan opetusohjelmaa ja asetamme suodatinsymbolin (|) JSON-suodattimen kanssa.

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

lähtö:

JSON-suodatin AngularJS:ssä

Ulostulosta,

  • Voidaan nähdä, että JSON kuin merkkijono jäsennetään ja näyttää oikean JSON-objektin selaimessa.

Yhteenveto

  • Suodattimia käytetään muuttamaan tapaa, jolla tulos näytetään käyttäjälle.
  • Angular tarjoaa sisäänrakennetut suodattimet, kuten pienten ja isojen kirjainten suodattimet, jotka muuttavat merkkijonojen ulostulon pieniksi ja isoiksi.
  • Myös numeroiden näyttötapaa voidaan muuttaa käyttämällä numerosuodatinta määrittämällä numerossa näytettävien desimaalipisteiden lukumäärä.
  • Valuuttasuodattimen avulla voidaan myös liittää valuuttasymboli mihin tahansa numeroon.
  • Jos vaaditaan JSON-kohtainen tulos, angular tarjoaa myös JSON-suodattimen minkä tahansa JSON-tyyppisen merkkijonon suodattamiseksi JSON-muotoon.
  • Jos yksikään kulmassa määritellyistä suodattimista ei täytä vaatimuksia, voit luoda mukautetun suodattimen ja lisätä mukautetun koodin määrittääksesi suodattimesta haluamasi tulosteen tyypin.