Filtre AngularJS și filtru personalizat AngularJS cu exemplu
James Hartman
⚡ Rezumat inteligent
Un filtru în AngularJS formatează valoarea unei expresii pentru afișare fără a modifica datele subiacente. Filtrele încorporate acoperă majusculele/minusculele, numerele, moneda și JSON, în timp ce un filtru personalizat gestionează orice regulă de formatare pe care framework-ul nu o oferă deja.
Ce este Filtrul în AngularJS?
A Filtrați în AngularJS ajută la formatarea valorii unei expresii pentru afișarea către utilizator fără a modifica valoarea originală. De exemplu, dacă doriți ca un șir să fie afișat fie cu litere mici, fie cu litere mari, puteți face acest lucru folosind filtre. Filtrele încorporate, cum ar fi „minuscule” și „majuscule”, returnează șirul în majusculele solicitate, iar alte filtre există pentru numere, valută și JSON.
⚠️ Notă privind versiunea: AngularJS (ramura 1.x) a ajuns la sfârșitul perioadei de viață pe 31 decembrie 2021 și nu mai primește alte corecții de securitate. Tot ce este descris mai jos rămâne corect pentru întreținerea aplicațiilor AngularJS existente; în Angular modern, același rol este îndeplinit de un pipe.
Filtrele sunt aplicate în vizualizare cu caracterul bară verticală. Înainte de a le analiza pe fiecare, este util să știți de ce ați scrie propriile filtre.
Filtru cu litere mici în AngularJS
Acest filtru primește un șir de caractere și afișează toate caracterele acestuia cu litere mici.
Mai jos, un controller trimite un șir de caractere către vizualizare prin intermediul obiectului scope, iar un filtru îl convertește în litere mici.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code Explicație
- Șirul de caractere cu majuscule/minuscule mixte „Angular JS” este plasat într-o variabilă membru numită
tutorialNamepe obiectul de domeniu. - Simbolul filtrului (|) marchează ieșirea pentru transformare, iar
lowercaseaplică filtrul încorporat care afișează întregul șir cu litere mici.
⚠️ Corecțiile au fost aplicate fiecărei listări. Toate cele șase exemplare originale aveau trei defecte în comun. chrset="UTF 8" nu este un atribut sau o codificare validă și acum este charset="UTF-8". angular-route.js încărcat înainte angular.min.js, care generează o eroare de modul și nu a fost niciodată utilizată — a fost eliminată, la fel ca și referința jQuery neutilizată. Textul susținea, de asemenea, că valoarea era „AngularJS”, în timp ce codul seta „Angular JS”; textul acum se potrivește.
ieșire:
Șirul cu majuscule/minuscule mixte este redat în întregime cu litere mici. Transformarea opusă funcționează în același mod.
Filtru majuscule în AngularJS
Acest filtru este echivalentul filtrului pentru litere mici, afișând fiecare caracter cu majuscule.
Mai jos, un controller trimite un șir de caractere către vizualizare prin intermediul obiectului scope, iar un filtru îl convertește în majuscule.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code Explicație
- Șirul de caractere cu majuscule/minuscule mixte „Angular JS” este plasat în
tutorialNameși atașată obiectului de domeniu. - Simbolul filtrului (|) este urmat de
uppercasecuvântul cheie, astfel încât filtrul încorporat afișează întregul șir cu majuscule.
⚠️ Corecţie: Versiunea originală a introdus această secțiune ca „un exemplu de filtru de majuscule AngularJS cu opțiunea de minuscule”, ceea ce este greșit de două ori. Această secțiune demonstrează filtrul de majuscule, iar AngularJS nu are deloc filtru de majuscule — majuscularea doar a primei litere necesită un filtru personalizat, pe care secțiunile ulterioare îl arată cum să îl construiești.
ieșire:
Filtrele de tip „case” nu acceptă argumente. Următorul filtru arată cum două puncte transmit un parametru unui filtru.
Filtru de numere în AngularJS
Acest filtru formatează un număr și poate limita numărul de zecimale afișate.
Exemplul de mai jos folosește filtrul numeric pentru a afișa o valoare restricționată la două zecimale. Un controler trimite numărul către vizualizare prin intermediul obiectului scope, iar filtrul este aplicat în vizualizare.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code Explicație
- Un număr cu mai multe zecimale este plasat într-o variabilă membru numită
tutorialIDși atașată obiectului de domeniu. - Simbolul filtrului (|) este urmat de
number:2Două puncte transmit un argument, iar 2 setează două zecimale. Valoarea este rotunjită pentru afișare, astfel încât 3.565656 apare ca 3.57, în timp ce domeniul de aplicare păstrează numărul complet.
ieșire:
Formatarea unui număr simplu nu este adesea suficientă atunci când valoarea reprezintă bani, lucru pe care îl gestionează următorul filtru.
Filtrul valutar în AngularJS
Acest filtru formatează un număr ca valoare monetară, adăugându-i un simbol monetar prefixat, cum ar fi $.
În exemplul de mai jos, un controller trimite un număr către vizualizare prin intermediul obiectului scope, iar filtrul valutar este aplicat în vizualizare.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code Explicație
- Un număr este plasat într-o variabilă membru numită
tutorialpriceși atașată obiectului de domeniu. - Simbolul filtrului (|) este urmat de
currencyfiltru.
⚠️ Corecţie: Versiunea originală susținea că moneda „depinde de setările de limbă aplicate mașinii”. Nu este așa. AngularJS folosește setările regionale incluse în bibliotecă, implicit en-US, deci simbolul este $ indiferent de sistemul de operare. Încărcați codul corespunzătoare. angular-locale_*.js fișier sau transmiteți direct simbolul: {{tutorialprice | currency:"£"}}.
ieșire:
Șirurile de caractere și numerele sunt valori simple. Filtrul final încorporat se ocupă de obiecte întregi.
Filtru JSON în AngularJS
Acest filtru convertește un obiect într-unul formatat JSON șir de caractere, care este util pentru inspectarea datelor de domeniu în timpul dezvoltării.
În exemplul de mai jos, un controller trimite un obiect către vizualizare prin intermediul obiectului scope, iar filtrul JSON este aplicat în vizualizare.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code Explicație
- Un obiect care ține
TutorialID: 12șitutorialName: "Angular"este plasat într-o variabilă membru numitătutorialși atașată obiectului de domeniu. - Simbolul filtrului (|) este urmat de
jsonfiltru, care serializează obiectul în text JSON indentat.
⚠️ Corecţie: Originalul descria această valoare ca „un număr” și ca „un șir de tip JSON”. Nu este niciuna dintre acestea. Este un JavaObiect Script, iar filtrul JSON este cel care îl convertește într-un șir JSON pentru afișare.
ieșire:
Aceste cinci filtre acoperă cazurile comune. Când niciunul nu produce rezultatul de care aveți nevoie, vă scrieți propriul filtru.
Filtru personalizat AngularJS
Uneori, filtrele încorporate în AngularJS nu pot îndeplini cerințele de formatare a ieșirii. Într-un astfel de caz, se poate crea un filtru personalizat AngularJS, care returnează ieșirea în modul necesar.
Un filtru personalizat este înregistrat pe un modul și apoi se comportă exact ca unul încorporat. Secțiunile de mai jos acoperă mai întâi filtrele standard, deoarece un filtru personalizat folosește aceeași sintaxă de tip pipe, apoi arată cum se construiește unul.
Cum se creează un filtru personalizat în AngularJS
În exemplul de mai jos, un șir de caractere trece de la controlor la vizualizare prin intermediul obiectului scope, dar nu ar trebui afișat așa cum este. Un filtru personalizat în AngularJS adaugă un alt șir de caractere și afișează rezultatul complet.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code Explicație
- Șirul „Angular” este plasat într-o variabilă membru numită
tutorialși atașată obiectului de domeniu. - AngularJS oferă
filtermetoda de înregistrare utilizată pentru a crea un filtru personalizat. „Demofilter” este numele dat acestuia, iar acest nume este ceea ce se referă vizualizarea. - Aceasta este forma standard a unui filtru personalizat: funcția înregistrată este o fabrică returnează funcția care efectuează lucrarea. Funcția respectivă primește valoarea filtrată ca prim parametru și returnează rezultatul — aici, intrarea cu „Tutorial” adăugat.
- Filtrul este aplicat în vizualizare folosind aceeași sintaxă de pipe ca orice filtru încorporat.
👍 Sfat: Numele filtrelor sunt în mod convențional scrise cu litere mici sau cu majusculă. „Demofilter” funcționează, dar un nume precum appendTutorial se citește mai bine și evită conflictul cu un nume predefinit.
ieșire:
Cuvântul „Tutorial” a fost adăugat la șirul de caractere transmis în tutorial variabilă. Acest filtru adaugă întotdeauna același text, pe care secțiunea următoare îl face configurabil.
Cum se transmit argumente către un filtru personalizat
Filtrul de mai sus codează fix textul pe care îl adaugă, deci poate face un singur lucru. Filtre încorporate, cum ar fi number:2 acceptă un argument după două puncte, iar un filtru personalizat poate face la fel: fiecare parametru după primul se mapează la un argument separat prin două puncte în vizualizare.
Sunt implicați trei pași: adăugarea parametrilor după input În funcția returnată, furnizați o valoare implicită pentru orice valoare opțională, astfel încât filtrul să funcționeze în continuare atunci când argumentul este omis, apoi transmiteți argumentele în vizualizare separate prin două puncte.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
Vizualizarea se citește apoi după cum urmează, unde „Tutorial” devine suffix iar cratima devine separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Două detalii sunt ușor de omis. Argumentele sunt expresii AngularJS, deci un șir literal trebuie să fie între ghilimele, în timp ce un cuvânt neghilimele este citit ca o proprietate de domeniu. Filtrele se înlănțuie și ele, fiecare primind rezultatul celui precedent: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Avertisment: Păstrează un filtru pur — aceeași ieșire pentru aceeași intrare, fără modificări externe. AngularJS stochează în cache un filtru pur și îl rulează din nou numai atunci când intrarea se modifică. Un filtru care citește ceasul sau modifică un serviciu trebuie marcat $stateful, care dezactivează memorarea în cache și rulează filtrul la fiecare ciclu de digest, o cauză frecventă a paginilor lente.
Filtrele nu sunt limitate la șabloane. Același filtru poate fi apelat din JavaScript, așa cum se arată în continuare.
Cum se utilizează filtrele într-un controler cu serviciul $filter
Aplicarea unui filtru în vizualizare este un caz obișnuit, dar valoarea transformată este uneori necesară în interiorul controlerului, de exemplu înainte de a trimite date către un server. AngularJS expune fiecare filtru înregistrat, atât cel încorporat, cât și cel personalizat, prin intermediul $filter serviciu. Injectați-l, apelați-l cu numele filtrului pentru a prelua funcția de filtrare, apoi invocați-o cu valoarea și orice argumente.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
Există și o formă mai scurtă: injectarea numelui filtrului urmat de Filter, Cum ar fi uppercaseFilter, furnizează funcția de filtrare direct și aceasta poate fi apelată imediat. Ambele forme se rezolvă în aceeași funcție, deci alegerea este stilistică.
Două utilizări apar în mod repetat. Prima este pregătirea unei sarcini utile: o dată trebuie de obicei să ajungă la un API într-un model fix și $filter('date')(value, 'yyyy-MM-dd') o produce fără a atinge valoarea legată de formular. A doua este restrângerea unei colecții o dată în controler, în loc să lase orderBy într-un ng-repetă expresie unde se rulează din nou la fiecare digest.
Filtrele injectate în acest fel sunt încă înregistrate în modul, deci trebuie declarat un filtru personalizat cu app.filter înainte ca vreun controlor să solicite $filter pentru aceasta. Altfel, AngularJS generează o eroare de furnizor necunoscut.
Apelarea unui filtru JavaUn script diferă de un șablon într-un mod important: rezultatul este calculat o singură dată și stocat în domeniul de aplicare, în loc să fie recalculat la fiecare digest. Acest lucru îl face opțiunea mai rapidă pentru o valoare care se schimbă rar și opțiunea greșită pentru una care trebuie track introducere de date de la utilizator.
