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

By: James Hartman James Hartman
Hours korszerűsített

Mi az a szűrő az AngularJS-ben?

A Szűrés AngularJS-ben segít formázni egy kifejezés értékét, hogy az eredeti formátum megváltoztatása nélkül megjelenjen a felhasználó számára. Ha például azt szeretné, hogy a karakterlánc kis- vagy nagybetűs legyen, ezt szűrők segítségével is megteheti. Vannak beépített szűrők, mint például a „kisbetűs”, „nagybetűs” szűrők, amelyek ennek megfelelően tudják lekérni a kis- és nagybetűs kimenetet.

AngularJS egyéni szűrő

Néha az Angular beépített szűrői nem felelnek meg a kimeneti szűréssel kapcsolatos igényeknek vagy követelményeknek. Ilyen esetben létrehozható egy AngularJS egyedi szűrő, amely a kívánt módon továbbítja a kimenetet.

Hasonlóképpen a számokhoz más szűrőket is használhat. Ebben az oktatóanyagban látni fogjuk az Angularban elérhető különböző szabványos beépített szűrőket.

Egyéni szűrő létrehozása az AngularJS-ben

Az alábbi egyéni szűrő AngularJS példában egy karakterláncot fogunk átadni a nézetnek a vezérlőből a hatókör objektumon keresztül, de nem akarjuk, hogy a karakterlánc úgy jelenjen meg, ahogy van.

Biztosítani szeretnénk, hogy amikor megjelenítjük a karakterláncot, egyéni szűrőt adjunk át AngularJS, amely hozzáfűz egy másik karakterláncot, és megjeleníti a befejezett karakterláncot a felhasználó számára.

Hozzon létre egyéni szűrőt az AngularJS-ben

<!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>

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, amellyel egyéni szűrőnk készíthető. A „Demofilter” a szűrőnknek adott név.
  3. Ez a szabványos módja az AngularJS egyéni szűrőinek meghatározásának, ahol egy függvényt ad vissza. Ez a függvény tartalmazza az egyéni szűrő létrehozásához szükséges egyéni kódot. A mi függvényünkben egy "Angular" karakterláncot veszünk, amelyet a nézetünkből a szűrőhöz továbbítunk, és ehhez hozzáfűzzük a "Tutorial" karakterláncot.
  4. A Demofilterünket használjuk a tagváltozónkon, amelyet a vezérlőtől a nézethez továbbítottunk.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Hozzon létre egyéni szűrőt az AngularJS-ben

A kimenetből,

  • Látható, hogy egyéni szűrőnket alkalmaztuk és
  • A "Tutorial" szót hozzáfűztük a karakterlánc végéhez, amelyet a tagváltozós oktatóprogramban adtak át.

KAPCSOLÓDÓ CIKKEK

Kisbetűs szűrő az AngularJS-ben

Ez a szűrő karakterlánc-kimenetet vesz fel, és formázza a karakterláncot, és a karakterlánc összes karakterét kisbetűként jeleníti meg.

Nézzünk egy példát az AngularJS-szűrőkre az AngularJS-ből kisbetűre opcióval.

Az alábbi példában egy vezérlőt fogunk használni, hogy egy karakterláncot küldjünk egy nézetnek a hatókör objektumon keresztül. Ezután a nézetben egy szűrőt használunk a karakterlánc kisbetűssé alakításához.

Kisbetűs szűrő az AngularJS-ben

<!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>

Kód Magyarázat

  1. Itt egy karakterláncot adunk át, amely kis- és nagybetűk kombinációja a „tutorialName” tagváltozóban, és csatoljuk a hatókör objektumhoz. Az átadott karakterlánc értéke „AngularJS”.
  2. A „tutorialName” tagváltozót használjuk, és egy szűrőszimbólumot (|) helyezünk el, ami azt jelenti, hogy a kimenetet szűrő használatával módosítani kell. Ezután a kisbetűs kulcsszóval azt mondjuk, hogy a beépített szűrő használatával a teljes karakterláncot kisbetűkkel írjuk ki.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Kisbetűs szűrő az AngularJS-ben

A kimenetből

  • Látható, hogy a tutorialName változóban átadott „AngularJS” karakterlánc végrehajtásra került, amely kis- és nagybetűk kombinációja volt.
  • A végrehajtás után a végső kimenet kisbetűvel jelenik meg, amint az fent látható.

Nagybetűs szűrő az AngularJS-ben

Ez a szűrő hasonló a kisbetűs szűrőhöz; A különbség az, hogy karakterlánc kimenetet vesz fel, és formázza a karakterláncot, és a karakterlánc összes karakterét nagybetűként jeleníti meg.

Nézzünk egy példát az AngularJS nagybetűs szűrő kisbetűs beállítására.

Az alábbi AngularJS nagybetűs példában egy vezérlőt fogunk használni, hogy egy karakterláncot küldjünk egy nézetnek a hatókör objektumon keresztül. Ezután a nézetben egy szűrőt használunk a karakterlánc nagybetűssé alakításához.

Nagybetűs szűrő az AngularJS-ben

<!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>

Kód Magyarázat

  1. Itt egy karakterláncot adunk át, amely kis- és nagybetűs „Angular JS” karakterek kombinációja a „tutorialName” nevű tagváltozóban, és csatoljuk a hatókör objektumhoz.
  2. A „tutorialName” tagváltozót használjuk, és egy szűrőszimbólumot (|) teszünk, ami azt jelenti, hogy a kimenetet szűrővel kell módosítani. Ezután a nagybetűs kulcsszóval azt mondjuk, hogy a beépített szűrő használatával a teljes karakterláncot nagybetűvel írjuk ki.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Nagybetűs szűrő az AngularJS-ben

A kimenetből,

  • Látható, hogy a tutorialName változóban átadott karakterlánc, amely kis- és nagybetűk kombinációja volt, minden nagybetűvel lett kiadva.

Számszűrő az AngularJS-ben

Ez a szűrő formáz egy számot, és korlátozhatja a szám tizedesvesszőjét.

Nézzünk egy példát az AngularJS szűrőkre a szám opcióval.

Az alábbi példában

Be akartuk mutatni, hogyan használhatjuk a számszűrőt a megjelenítendő szám formázására, 2 tizedesjegy korlátozással.

Vezérlőt fogunk használni, hogy számot küldjünk egy nézetnek a hatókör objektumon keresztül. Ezután egy szűrőt használunk a nézetben a számszűrő alkalmazásához.

Számszűrő az AngularJS-ben

<!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>

Kód Magyarázat

  1. Itt egy tutorialID nevű tagváltozóban nagyobb számú tizedesjegyű számot adunk át, és csatoljuk a hatókör objektumhoz.
  2. A tutorialID tagváltozót használjuk, és egy szűrőszimbólumot (|) teszünk a számszűrő mellé. Most a szám:2-ben a kettő azt jelzi, hogy a szűrőnek 2-re kell korlátoznia a tizedesjegyek számát.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Számszűrő az AngularJS-ben

A kimenetből,

  • Látható, hogy a sok tizedesvesszőt tartalmazó tutorialID változóban átadott szám 2 tizedesjegyre korlátozódott az alkalmazott 2 szűrő miatt.

Valutaszűrő az AngularJS-ben

Ez a szűrő egy pénznemszűrőt számmá formáz.

Tegyük fel, hogy ha egy számot szeretne megjeleníteni olyan pénznemben, mint például $, akkor ez a szűrő használható.

Az alábbi példában egy vezérlőt fogunk használni, hogy számot küldjünk egy nézetnek a hatókör objektumon keresztül. Ezután egy szűrőt használunk a nézetben az aktuális szűrő alkalmazásához.

Valutaszűrő az AngularJS-ben

<!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>

Kód Magyarázat

  1. Itt egy számot adunk át a tutorialprice nevű tagváltozóban, és csatoljuk a hatókör objektumhoz.
  2. A tutorialprice tagváltozót használjuk, és egy szűrőszimbólumot (|) helyezünk el a pénznemszűrő mellett. Vegye figyelembe, hogy az alkalmazott pénznem a gépen alkalmazott nyelvi beállításoktól függ.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Valutaszűrő az AngularJS-ben

A kimenetből

  • Látható, hogy a valutaszimbólum hozzá lett fűzve a tutorialprice változóban átadott számhoz.
  • Esetünkben, mivel a nyelvi beállítások angol (Egyesült Államok), pénznemként a $ szimbólum kerül beillesztésre.

JSON-szűrő az AngularJS-ben

Ez a szűrő formázza a JSON mint a bemenet, és az AngularJS JSON szűrőt alkalmazza, hogy a kimenetet JSON-ban adja meg.

Az alábbi példában egy vezérlőt fogunk használni, hogy egy JSON típusú objektumot küldjünk egy nézetnek a hatókör objektumon keresztül. Ezután egy szűrőt használunk a nézetben a JSON-szűrő alkalmazásához.

JSON-szűrő az AngularJS-ben

<!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>

Kód Magyarázat

  1. Itt adunk át egy számot egy „oktatóprogram” nevű tagváltozóban, és csatoljuk a hatókör objektumhoz. Ez a tagváltozó tartalmaz egy JSON típusú oktatói azonosító: 12 és TutorialName: "Angular" karakterláncot.
  2. A tagváltozó oktatóanyagát használjuk, és egy szűrőszimbólumot (|) helyezünk el a JSON-szűrő mellett.

Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

JSON-szűrő az AngularJS-ben

A kimenetből,

  • Látható, hogy a JSON, mint egy karakterlánc, elemzésre kerül, és megfelelő JSON-objektumot jelenít meg a böngészőben.

Összegzésként

  • A szűrők arra szolgálnak, hogy módosítsák a kimenet felhasználó számára történő megjelenítését.
  • Az Angular beépített szűrőket kínál, például a kis- és nagybetűs szűrőket, amelyek a karakterláncok kimenetét kis- és nagybetűsre módosítják.
  • Lehetőség van a számok megjelenítési módjának megváltoztatására is a számszűrő használatával, a számban megjelenítendő tizedespontok számának megadásával.
  • A valutaszűrővel tetszőleges számhoz hozzá lehet fűzni a pénznem szimbólumát.
  • Ha JSON-specifikus kimenetre van szükség, az angular JSON-szűrőt is biztosít bármely JSON-szerű karakterlánc JSON-formátumba való szűréséhez.
  • Ha van olyan követelmény, amelyet a szögben meghatározott szűrők egyike sem teljesít, akkor létrehozhatja egyéni szűrőjét, és hozzáadhatja az egyéni kódot, hogy meghatározza a szűrőből kívánt kimenet típusát.