Filtre AngularJS și filtru personalizat AngularJS cu exemplu

Ce este Filtrul în AngularJS?

A Filtrați în AngularJS ajută la formatarea valorii unei expresii pentru a fi afișată utilizatorului fără a modifica formatul original. De exemplu, dacă doriți șirul dvs. fie cu litere mici, fie cu majuscule, puteți face acest lucru folosind filtre. Există filtre încorporate, cum ar fi „minuscule”, „majuscule”, care pot prelua litere mici și majuscule în mod corespunzător.

Filtru personalizat AngularJS

Uneori, filtrele încorporate în Angular nu pot satisface nevoile sau cerințele pentru filtrarea ieșirii. Într-un astfel de caz, poate fi creat un filtru personalizat AngularJS, care poate trece rezultatul în modul necesar.

În mod similar, pentru numere, puteți utiliza alte filtre. În timpul acestui tutorial, vom vedea diferitele filtre standard încorporate disponibile în Angular.

Cum se creează un filtru personalizat în AngularJS

În exemplul de mai jos, filtrul personalizat AngularJS, vom transmite un șir de caractere vizualizării de la controler prin intermediul obiectului scop, dar nu dorim ca șirul să fie afișat așa cum este.

Vrem să ne asigurăm că, ori de câte ori afișăm șirul, vom trece un filtru personalizat AngularJS, care va adăuga un alt șir și va afișa șirul completat utilizatorului.

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

Explicarea codului

Aici trecem un șir „Angular” într-o variabilă membru numită tutorial și îl atașăm obiectului scope.
Angular oferă serviciul de filtrare care poate fi folosit pentru a crea filtrul nostru personalizat. „Demofilter” este un nume dat filtrului nostru.
Acesta este modul standard în care sunt definite filtrele personalizate în AngularJS în care este returnată o funcție. Această funcție este cea care conține codul personalizat pentru a crea filtrul personalizat. În funcția noastră, luăm un șir „Angular” care este transmis din punctul nostru de vedere la filtru și adăugăm șirul „Tutorial” la acesta.
Folosim Demofilter-ul nostru pe variabila membru care a fost transmisă de la controler la vizualizare.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

Din ieșire,

Se poate observa că filtrul nostru personalizat a fost aplicat și
Cuvântul „Tutorial” a fost adăugat la sfârșitul șirului, care a fost transmis în tutorialul pentru variabilele membre.

Filtru cu litere mici în AngularJS

Acest filtru preia o ieșire șir și formatează șirul și afișează toate caracterele din șir ca litere mici.

Să ne uităm la un exemplu de filtre AngularJS cu opțiunea AngularJS la minuscule.

În exemplul de mai jos, vom folosi un controler pentru a trimite un șir de caractere către o vizualizare prin intermediul obiectului scope. Vom folosi apoi un filtru în vizualizare pentru a converti șirul în minuscule.

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

Explicarea codului

Aici trecem un șir, care este o combinație de caractere minuscule și majuscule într-o variabilă membru numită „tutorialName” și îl atașăm obiectului scope. Valoarea șirului care este transmis este „AngularJS”.
Folosim variabila membru „tutorialName” și punem un simbol de filtru (|), ceea ce înseamnă că rezultatul trebuie modificat prin utilizarea unui filtru. Apoi folosim cuvântul cheie cu minuscule pentru a spune că folosim filtrul încorporat pentru a scoate întregul șir cu litere mici.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

De la ieșire

Se poate observa că șirul „AngularJS” care a fost trecut în variabila tutorialName care era o combinație de caractere minuscule și majuscule a fost executat.
După execuție, rezultatul final este cu litere mici, așa cum se arată mai sus.

Filtru majuscule în AngularJS

Acest filtru este similar cu filtrul cu litere mici; diferența este că preia o ieșire șir și formatează șirul și afișează toate caracterele din șir ca majuscule.

Să ne uităm la un exemplu de filtru de capitalizare AngularJS cu opțiunea cu litere mici.

În exemplul de mai jos cu majuscule AngularJS, vom folosi un controler pentru a trimite un șir de caractere către o vizualizare prin intermediul obiectului scope. Vom folosi apoi un filtru în vizualizare pentru a converti șirul în majuscule.

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

Explicarea codului

Aici trecem un șir care este o combinație de caractere minuscule și majuscule „Angular JS” într-o variabilă membru numită „tutorialName” și o atașăm obiectului scope.
Folosim variabila membru „tutorialName” și punem un simbol de filtru (|), ceea ce înseamnă că rezultatul trebuie modificat prin utilizarea unui filtru. Apoi folosim cuvântul cheie cu majuscule pentru a spune să folosim filtrul încorporat pentru a scoate întregul șir cu majuscule.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

Din ieșire,

Se poate observa că șirul care a fost transmis în variabila tutorialName, care era o combinație de caractere minuscule și majuscule, a fost afișat în majuscule.

Filtru de numere în AngularJS

Acest filtru formatează un număr și poate aplica o limită la punctele zecimale pentru un număr.

Să ne uităm la un exemplu de filtre AngularJS cu opțiunea număr.

În exemplul de mai jos,

Am vrut să arătăm cum putem folosi filtrul de numere pentru a formata un număr pentru a fi afișat cu o restricție de 2 zecimale.

Vom folosi un controler pentru a trimite un număr la o vizualizare prin obiectul scope. Vom folosi apoi un filtru în vizualizare pentru a aplica filtrul de numere.

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

Explicarea codului

Aici trecem un număr cu un număr mai mare de zecimale într-o variabilă membru numită tutorialID și îl atașăm obiectului scope.
Folosim variabila membru tutorialID și punem un simbol de filtru (|) împreună cu filtrul de numere. Acum, în numărul: 2, cele două indică faptul că filtrul ar trebui să limiteze numărul de zecimale la 2.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

Din ieșire,

Se poate observa că numărul care a fost trecut în variabila tutorialID care avea un număr mare de zecimale a fost limitat la 2 zecimale din cauza numărului: 2 filtre care a fost aplicat.

Filtrul valutar în AngularJS

Acest filtru formatează un filtru de monedă într-un număr.

Să presupunem că, dacă doriți să afișați un număr cu o monedă precum $, atunci acest filtru poate fi utilizat.

În exemplul de mai jos, vom folosi un controler pentru a trimite un număr către o vizualizare prin obiectul scope. Vom folosi apoi un filtru în vizualizare pentru a aplica filtrul curent.

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

Explicarea codului

Aici trecem un număr într-o variabilă membru numită tutorialprice și îl atașăm obiectului scope.
Folosim variabila pentru membru tutorialprice și punem un simbol de filtru (|) împreună cu filtrul valutar. Rețineți că moneda care este aplicată depinde de setările de limbă care sunt aplicate aparatului.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

De la ieșire

Se poate vedea că simbolul monedei a fost adăugat la numărul care a fost trecut în variabila tutorialprice.
În cazul nostru, deoarece setările de limbă sunt engleza (Statele Unite), simbolul $ este inserat ca monedă.

Filtru JSON în AngularJS

Acest filtru formatează a JSON ca intrare și aplică filtrul AngularJS JSON pentru a oferi ieșirea în JSON.

În exemplul de mai jos, vom folosi un controler pentru a trimite un obiect de tip JSON la o vizualizare prin intermediul obiectului scope. Vom folosi apoi un filtru în vizualizare pentru a aplica filtrul JSON.

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

Explicarea codului

Aici trecem un număr într-o variabilă membru numită „tutorial” și îl atașăm obiectului scope. Această variabilă membru conține un șir de tip JSON de Tutorial ID:12 și TutorialName:”Angular”.
Folosim tutorialul pentru variabilele membre și punem un simbol de filtru (|) împreună cu filtrul JSON.

Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

Din ieșire,

Se poate observa că JSON ca un șir este analizat și afișat un obiect JSON adecvat în browser.

Rezumat

Filtrele sunt folosite pentru a modifica modul în care rezultatul este afișat utilizatorului.
Angular oferă filtre încorporate, cum ar fi filtrele cu litere mici și majuscule, pentru a schimba ieșirea șirurilor în minuscule și, respectiv, majuscule.
Există, de asemenea, o prevedere pentru modificarea modului în care sunt afișate numerele prin utilizarea filtrului de numere prin specificarea numărului de puncte zecimale care urmează să fie afișate în număr.
De asemenea, se poate folosi filtrul valutar pentru a adăuga simbolul monedei oricărui număr.
Dacă există o cerință de a avea o ieșire specifică JSON, angular oferă și filtrul JSON pentru filtrarea oricărui șir de tip JSON în format JSON.
Dacă există o cerință care nu este îndeplinită de niciunul dintre filtrele definite în unghiular, atunci puteți crea filtrul personalizat și puteți adăuga codul personalizat pentru a determina tipul de ieșire pe care îl doriți de la filtru.

S-ar putea sa-ti placa:

Ce este Filtrul în AngularJS?

Filtru personalizat AngularJS

Cum se creează un filtru personalizat în AngularJS

Explicarea codului

ARTICOLE SIMILARE

Filtru cu litere mici în AngularJS

Explicarea codului

Filtru majuscule în AngularJS

Explicarea codului

Filtru de numere în AngularJS

Explicarea codului

Filtrul valutar în AngularJS

Explicarea codului

Filtru JSON în AngularJS

Explicarea codului

Rezumat