AngularJS-filtrid ja AngularJS-i kohandatud filter koos näitega

Autor: James Hartman James Hartman
Hours Ajakohastatud

Mis on AngularJS-i filter?

A Filtreerige AngularJS-is aitab vormindada avaldise väärtust kasutajale kuvamiseks ilma algset vormingut muutmata. Näiteks kui soovite, et string oleks kas väike- või suurtähtedega, saate seda teha filtrite abil. Seal on sisseehitatud filtrid, nagu 'väiketähed', 'suurtähed', mis saavad vastavalt hankida väike- ja suurtähtede väljundi.

AngularJS kohandatud filter

Mõnikord ei suuda Angulari sisseehitatud filtrid vastata väljundi filtreerimise vajadustele või nõuetele. Sellisel juhul saab luua AngularJS kohandatud filtri, mis suudab väljundi vajalikul viisil edasi anda.

Samamoodi saate numbrite jaoks kasutada muid filtreid. Selle õpetuse käigus näeme Angularis saadaolevaid erinevaid standardseid sisseehitatud filtreid.

Kuidas luua AngularJS-is kohandatud filtrit

Allolevas kohandatud filtri AngularJS näites edastame stringi kontrollerist vaatesse ulatuseobjekti kaudu, kuid me ei soovi, et stringi kuvataks sellisena, nagu see on.

Tahame tagada, et stringi kuvamisel edastame kohandatud filtri AngularJS, mis lisab teise stringi ja kuvab lõppenud stringi kasutajale.

Looge AngularJS-is kohandatud filter

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

Koodi selgitus

  1. Siin edastame stringi "Angular" liikmemuutujas, mida nimetatakse õpetuseks, ja kinnitame selle ulatuse objektiga.
  2. Angular pakub filtriteenust, mida saab kasutada meie kohandatud filtri loomiseks. „Demofilter” on meie filtrile antud nimi.
  3. See on standardne viis AngularJS-i kohandatud filtrite määratlemiseks, kus funktsioon tagastatakse. See funktsioon sisaldab kohandatud filtri loomiseks kohandatud koodi. Oma funktsioonis võtame stringi "Angular", mis edastatakse meie vaatest filtrisse, ja lisame sellele stringi "Tutorial".
  4. Me kasutame oma Demofiltrit oma liikmemuutuja jaoks, mis edastati kontrollerist vaatesse.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Looge AngularJS-is kohandatud filter

Väljundist,

  • On näha, et meie kohandatud filter on rakendatud ja
  • Sõna "Tutorial" on lisatud stringi lõppu, mis edastati liikmemuutujate õpetuses.

SEOTUD ARTIKLID

AngularJS-i väiketähtedega filter

See filter võtab stringi väljundi ja vormindab stringi ning kuvab kõik stringis olevad märgid väiketähtedena.

Vaatame AngularJS-filtrite näidet valikuga AngularJS kuni väiketähtedeni.

Allolevas näites kasutame kontrollerit stringi saatmiseks vaatesse ulatuse objekti kaudu. Seejärel kasutame vaates filtrit stringi väiketähtedeks teisendamiseks.

AngularJS-i väiketähtedega filter

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

Koodi selgitus

  1. Siin edastame stringi, mis on väike- ja suurtähtede kombinatsioon liigemuutujas nimega "tutorialName", ja kinnitame selle ulatuse objektiga. Edastatava stringi väärtus on “AngularJS”.
  2. Kasutame liikmemuutujat “tutorialName” ja paneme sisse filtri sümboli (|), mis tähendab, et väljundit tuleb filtri abil muuta. Seejärel kasutame väiketähtedega märksõna, et kasutada sisseehitatud filtrit, et väljastada kogu string väiketähtedega.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

AngularJS-i väiketähtedega filter

Väljundist

  • On näha, et string "AngularJS", mis edastati muutujas tutorialName, mis oli väike- ja suurtähtede kombinatsioon, on täidetud.
  • Pärast täitmist on lõppväljund väiketähtedega, nagu ülal näidatud.

AngularJS-i suurtähtedega filter

See filter on sarnane väiketähtedega filtriga; Erinevus seisneb selles, et võtab stringi väljundi ja vormindab stringi ning kuvab kõik stringis olevad märgid suurtähtedena.

Vaatame väiketähtedega filtri AngularJS suurtähtede kasutamise näidet.

Allolevas AngularJS-i suurtähtede kasutamise näites kasutame kontrollerit stringi saatmiseks vaatesse ulatuse objekti kaudu. Seejärel kasutame vaates filtrit stringi suurtähtedeks teisendamiseks.

AngularJS-i suurtähtedega filter

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

Koodi selgitus

  1. Siin edastame stringi, mis on väike- ja suurtähtede kombinatsioon "Angular JS" liikmemuutujas nimega "tutorialName", ja lisame selle ulatuse objektile.
  2. Kasutame liikmemuutujat “tutorialName” ja paneme sisse filtri sümboli (|), mis tähendab, et väljundit tuleb filtri abil muuta. Seejärel kasutame suurtähtedega märksõna, et kasutada sisseehitatud filtrit, et väljastada kogu string suurtähtedega.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

AngularJS-i suurtähtedega filter

Väljundist,

  • On näha, et string, mis edastati muutujas tutorialName, mis oli väike- ja suurtähtede kombinatsioon, on välja antud kõigi suurtähtedega.

Numbrifilter AngularJS-is

See filter vormindab arvu ja võib rakendada arvu komakohtadele piirangut.

Vaatame AngularJS-i filtrite näidet numbrivalikuga.

Allolevas näites

Tahtsime näidata, kuidas saame numbrifiltri abil kuvada numbrit kahe kümnendkoha piiranguga.

Kasutame kontrollerit, et saata number vaatesse ulatuseobjekti kaudu. Seejärel kasutame numbrifiltri rakendamiseks vaates filtrit.

Numbrifilter AngularJS-is

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

Koodi selgitus

  1. Siin edastame liikmemuutujas nimega tutorialID suurema arvu kümnendkohtadega arvu ja kinnitame selle ulatuse objektiga.
  2. Kasutame liikmemuutujat tutorialID ja paneme filtri sümboli (|) koos numbrifiltriga. Nüüd numbris:2 näitavad need kaks, et filter peaks piirama kümnendkohtade arvu 2-ni.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Numbrifilter AngularJS-is

Väljundist,

  • On näha, et suure arvu komakohtadega muutujas tutorialID edastatud arv on piiratud kahe kümnendkohaga, kuna rakendatud arv: 2 filtrit.

AngularJS-i valuutafilter

See filter vormindab valuutafiltri numbriks.

Oletame, et kui soovite kuvada numbrit sellise valuutaga nagu $, saate seda filtrit kasutada.

Allolevas näites kasutame kontrollerit, et saata number vaatesse ulatuseobjekti kaudu. Seejärel kasutame praeguse filtri rakendamiseks vaates filtrit.

AngularJS-i valuutafilter

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

Koodi selgitus

  1. Siin edastame arvu liikmemuutujas nimega tutorialprice ja lisame selle ulatuse objektile.
  2. Kasutame liikmemuutujat tutorialprice ja paneme valuutafiltri kõrvale filtri sümboli (|). Pange tähele, et rakendatav valuuta sõltub masinale rakendatavatest keeleseadetest.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

AngularJS-i valuutafilter

Väljundist

  • Näete, et valuuta sümbol on lisatud numbrile, mis edastati muutujas tutorialprice.
  • Kuna meie puhul on keeleseaded inglise keel (Ameerika Ühendriigid), sisestatakse valuutana sümbol $.

JSON-filter AngularJS-is

See filter vormindab a JSON nagu sisend ja rakendab AngularJS JSON-filtrit, et anda väljund JSON-is.

Allolevas näites kasutame kontrollerit, et saata JSON-tüüpi objekt vaatesse ulatuse objekti kaudu. Seejärel kasutame JSON-filtri rakendamiseks vaates filtrit.

JSON-filter AngularJS-is

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

Koodi selgitus

  1. Siin edastame arvu liikmemuutujas nimega "õpetus" ja lisame selle ulatuse objektile. See liigemuutuja sisaldab JSON-tüüpi stringi õpetuse ID:12 ja TutorialName:"Angular".
  2. Kasutame liikmemuutujate õpetust ja paneme JSON-filtri kõrvale filtri sümboli (|).

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

JSON-filter AngularJS-is

Väljundist,

  • On näha, et JSON nagu string sõelutakse ja kuvatakse brauseris õige JSON-objekt.

kokkuvõte

  • Filtreid kasutatakse väljundi kasutajale kuvamise viisi muutmiseks.
  • Angular pakub sisseehitatud filtreid, nagu väike- ja suurtähtede filtrid, et muuta stringide väljund vastavalt väike- ja suurtähtedeks.
  • Samuti on ette nähtud numbrite kuvamise viisi muutmine numbrifiltri abil, määrates arvus kuvatavate kümnendkohtade arvu.
  • Valuutafiltrit saab kasutada ka valuuta sümboli lisamiseks mis tahes numbrile.
  • Kui on nõutav JSON-i spetsiifiline väljund, pakub angular ka JSON-filtrit mis tahes JSON-i sarnase stringi JSON-vormingusse filtreerimiseks.
  • Kui on nõue, mida ükski nurga all määratletud filter ei täida, saate luua kohandatud filtri ja lisada kohandatud koodi, et määrata filtrist soovitud väljundi tüüp.