AngularJS filtri i AngularJS prilagođeni filtar s primjerom

Što je filtar u AngularJS?

A Filtrirajte u AngularJS pomaže formatirati vrijednost izraza za prikaz korisniku bez mijenjanja izvornog formata. Na primjer, ako želite da vaš niz bude napisan malim ili velikim slovima, to možete učiniti pomoću filtara. Postoje ugrađeni filtri kao što su 'mala slova', 'velika slova', koji mogu dohvatiti ispis malih i velikih slova u skladu s tim.

Prilagođeni filtar AngularJS

Ponekad ugrađeni filtri u Angularu ne mogu zadovoljiti potrebe ili zahtjeve za filtriranje izlaza. U tom slučaju može se izraditi prilagođeni filtar AngularJS koji može proslijediti izlaz na traženi način.

Slično tome, za brojeve možete koristiti druge filtre. Tijekom ovog vodiča vidjet ćemo različite standardne ugrađene filtere dostupne u Angularu.

Kako stvoriti prilagođeni filtar u AngularJS

U donjem primjeru prilagođenog filtra AngularJS, prenijet ćemo niz u pogled iz kontrolera putem objekta opsega, ali ne želimo da se niz prikazuje onakav kakav jest.

Želimo osigurati da kad god prikažemo niz, proslijeđujemo prilagođeni filtar AngularJS, koji će dodati još jedan niz i prikazati dovršeni niz korisniku.

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

Objašnjenje koda

Ovdje prosljeđujemo niz "Angular" u varijabli člana koja se zove tutorial i pridružujemo ga objektu opsega.
Angular pruža uslugu filtra koja se može koristiti za izradu našeg prilagođenog filtra. 'Demofilter' je naziv za naš filter.
Ovo je standardni način na koji se definiraju prilagođeni filtri u AngularJS-u pri čemu se funkcija vraća. Ova funkcija sadrži prilagođeni kod za stvaranje prilagođenog filtra. U našoj funkciji uzimamo niz "Angular" koji se prosljeđuje iz našeg pogleda u filtar i tome dodajemo niz "Tutorial".
Koristimo naš Demofilter na našoj varijabli člana koja je proslijeđena iz kontrolera u pogled.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza,

Vidi se da je primijenjen naš prilagođeni filtar i
Riječ 'Tutorial' dodana je na kraj niza koji je proslijeđen u varijabli člana tutorial.

Filter malih slova u AngularJS

Ovaj filter preuzima izlaz niza i oblikuje niz i prikazuje sve znakove u nizu kao mala slova.

Pogledajmo primjer AngularJS filtara s opcijom AngularJS u mala slova.

U donjem primjeru koristit ćemo kontroler za slanje niza u pogled putem objekta opsega. Zatim ćemo upotrijebiti filtar u prikazu za pretvaranje niza u mala slova.

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

Objašnjenje koda

Ovdje prosljeđujemo niz, koji je kombinacija malih i velikih slova u varijabli člana pod nazivom "tutorialName" i pridružujemo ga objektu opsega. Vrijednost niza koji se prosljeđuje je "AngularJS".
Koristimo varijablu člana “tutorialName” i stavljamo simbol filtra (|) što znači da se izlaz treba modificirati korištenjem filtra. Zatim koristimo ključnu riječ malim slovima kako bismo rekli da koristimo ugrađeni filtar za ispis cijelog niza malim slovima.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza

Može se vidjeti da je izvršen string “AngularJS” koji je proslijeđen u varijabli tutorialName koja je bila kombinacija malih i velikih slova.
Nakon izvršenja, konačni izlaz je napisan malim slovima kao što je prikazano gore.

Filter velikih slova u AngularJS

Ovaj filtar je sličan filtru malih slova; razlika je u tome što preuzima izlaz niza i oblikuje niz i prikazuje sve znakove u nizu kao velika slova.

Pogledajmo primjer filtra za velika slova AngularJS s opcijom malih slova.

U donjem primjeru AngularJS pisanja velikih slova koristit ćemo kontroler za slanje niza u pogled putem objekta opsega. Zatim ćemo upotrijebiti filtar u prikazu za pretvaranje niza u velika slova.

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

Objašnjenje koda

Ovdje prosljeđujemo niz koji je kombinacija malih i velikih slova "Angular JS" u varijabli člana pod nazivom "tutorialName" i pridružujemo ga objektu opsega.
Koristimo varijablu člana “tutorialName” i stavljamo simbol filtra (|), što znači da se izlaz treba modificirati korištenjem filtra. Zatim koristimo ključnu riječ velika slova kako bismo rekli da koristimo ugrađeni filtar za ispis cijelog niza velikim slovima.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza,

Može se vidjeti da je niz koji je proslijeđen u varijabli tutorialName, a koji je bio kombinacija malih i velikih slova, ispisan svim velikim slovima.

Filtar brojeva u AngularJS

Ovaj filtar oblikuje broj i može primijeniti ograničenje na decimalne točke za broj.

Pogledajmo primjer AngularJS filtera s opcijom broja.

U donjem primjeru,

Htjeli smo prikazati kako možemo koristiti filtar brojeva za formatiranje broja za prikaz uz ograničenje od 2 decimalna mjesta.

Upotrijebit ćemo kontroler za slanje broja u pogled preko objekta opsega. Zatim ćemo upotrijebiti filtar u prikazu da primijenimo filtar brojeva.

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

Objašnjenje koda

Ovdje prosljeđujemo broj s većim brojem decimalnih mjesta u varijabli člana koja se zove tutorialID i pridružujemo ga objektu opsega.
Koristimo varijablu člana tutorialID i stavljamo simbol filtra (|) zajedno s filtrom broja. Sada u broju:2, dva označava da filtar treba ograničiti broj decimalnih mjesta na 2.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza,

Može se vidjeti da je broj koji je proslijeđen u varijabli tutorialID koja je imala veliki broj decimalnih točaka ograničen na 2 decimalna mjesta zbog broja: 2 filtra koji je primijenjen.

Filtar valuta u AngularJS

Ovaj filtar oblikuje filtar valute u broj.

Pretpostavimo, ako želite prikazati broj s valutom kao što je $, tada se ovaj filtar može koristiti.

U donjem primjeru koristit ćemo kontroler za slanje broja u pogled putem objekta opsega. Zatim ćemo upotrijebiti filtar u prikazu za primjenu trenutnog filtra.

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

Objašnjenje koda

Ovdje prosljeđujemo broj u varijabli člana koja se zove tutorialprice i pridružujemo ga objektu opsega.
Koristimo varijablu za članove tutorialprice i stavljamo simbol filtra (|) uz filtar valute. Imajte na umu da valuta koja se primjenjuje ovisi o jezičnim postavkama koje se primjenjuju na stroj.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza

Može se vidjeti da je simbol valute dodan broju koji je proslijeđen u varijabli tutorialprice.
U našem slučaju, budući da su jezične postavke engleski (Sjedinjene Države), simbol $ je umetnut kao valuta.

JSON filter u AngularJS

Ovaj filter formatira a JSON poput ulaza i primjenjuje AngularJS JSON filtar za davanje izlaza u JSON-u.

U donjem primjeru koristit ćemo kontroler za slanje objekta tipa JSON u pogled putem objekta opsega. Zatim ćemo upotrijebiti filtar u prikazu za primjenu JSON filtra.

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

Objašnjenje koda

Ovdje prosljeđujemo broj u varijabli člana pod nazivom "tutorial" i pridružujemo ga objektu opsega. Ova varijabla člana sadrži niz JSON tipa Tutorial ID:12 i TutorialName:”Angular”.
Koristimo vodič za varijable člana i stavljamo simbol filtra (|) uz JSON filtar.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.

Izlaz:

Iz izlaza,

Može se vidjeti da se JSON poput niza analizira i prikazuje ispravan JSON objekt u pregledniku.

rezime

Filtri se koriste za promjenu načina na koji se izlaz prikazuje korisniku.
Angular nudi ugrađene filtre kao što su filtri za mala i velika slova za promjenu izlaza nizova u mala odnosno velika slova.
Također postoji odredba za promjenu načina na koji se brojevi prikazuju pomoću filtra brojeva određivanjem broja decimalnih točaka koje će se prikazati u broju.
Također se može koristiti filtar valute za dodavanje simbola valute bilo kojem broju.
Ako postoji zahtjev za JSON specifičnim izlazom, angular također nudi JSON filter za filtriranje bilo kojeg niza poput JSON-a u JSON format.
Ako postoji zahtjev koji nije ispunjen niti jednim od filtara definiranih u Angularu, tada možete stvoriti svoj prilagođeni filtar i dodati svoj prilagođeni kod da odredite vrstu izlaza koju želite od filtra.

Možda ti se svidi:

Što je filtar u AngularJS?

Prilagođeni filtar AngularJS

Kako stvoriti prilagođeni filtar u AngularJS

Objašnjenje koda

POVEZANI ČLANCI

Filter malih slova u AngularJS

Objašnjenje koda

Filter velikih slova u AngularJS

Objašnjenje koda

Filtar brojeva u AngularJS

Objašnjenje koda

Filtar valuta u AngularJS

Objašnjenje koda

JSON filter u AngularJS

Objašnjenje koda

rezime