AngularJS filtri i AngularJS prilagođeni filtar s primjerom

By: James Hartman James Hartman
Hours Ažurirano

⚡ Pametni sažetak

Filter u AngularJS-u formatira vrijednost izraza za prikaz bez promjene temeljnih podataka. Ugrađeni filteri pokrivaju velika i mala slova, brojeve, valutu i JSON, dok prilagođeni filter obrađuje bilo koje pravilo formatiranja koje okvir već ne pruža.

  • 🧾 Osnovni princip: Filter transformira samo ono što prikaz prikazuje; vrijednost koja se nalazi na objektu opsega se nikada ne mijenja.
  • ➖ Sintaksa usmjerivača: Okomita crta odvaja izraz od naziva filtra, a dvotočka mu prenosi argument.
  • 🔤 Filtri kućišta: Mala i velika slova pretvaraju niz za prikaz, a u AngularJS-u ne postoji filtar za velika slova.
  • 🔢 Broj i valuta: Broj ograničava decimalna mjesta, dok valuta ispred vrijednosti dodaje simbol određen lokalizacijom.
  • 🛠️ Prilagođeni filtri: Registriranje tvornice koja vraća funkciju stvara filter koji se može ponovno koristiti dostupan u cijelom modulu.
  • ⚡ Čistoća je važna: Filter mora vratiti isti izlaz za isti ulaz, jer AngularJS kešira rezultate i preskače ponovno pokretanje čistih filtera.
Pročitaj više

AngularJS filteri i prilagođeni filter

Što je filtar u AngularJS?

A Filtrirajte u AngularJS pomaže u formatiranju vrijednosti izraza za prikaz korisniku bez promjene izvorne vrijednosti. Na primjer, ako želite da se niz prikazuje malim ili velikim slovima, to možete učiniti pomoću filtera. Ugrađeni filteri kao što su 'mala slova' i 'velika slova' vraćaju niz u traženom obliku, a postoje i dodatni filteri za brojeve, valute i JSON.

⚠️ Napomena o verziji: AngularJS (grana 1.x) dosegao je kraj svog životnog vijeka 31. prosinca 2021. i neće primati daljnje sigurnosne zakrpe. Sve u nastavku ostaje točno za održavanje postojećih AngularJS aplikacija; u modernom Angularu istu ulogu ispunjava pipe.

Filtri se primjenjuju u prikazu s okomitom crtom. Prije nego što pogledate svaki od njih, korisno je znati zašto biste napisali vlastite.

Filter malih slova u AngularJS

Ovaj filter uzima niz znakova i prikazuje sve njegove znakove malim slovima.

U nastavku, kontroler šalje niz znakova u pogled putem objekta scope, a filter ga pretvara u mala slova.

Filter malih slova u AngularJS

<!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 Objašnjenje

  1. Niz s različitim veličinama slova "Angular JS" smješten je u varijablu članicu pod nazivom tutorialName na objektu opsega.
  2. Simbol filtera (|) označava izlaz za transformaciju, a lowercase ključna riječ primjenjuje ugrađeni filter koji cijeli niz prikazuje malim slovima.

⚠️ Ispravci su primijenjeni na svaki oglas. Svih šest originalnih primjeraka imalo je tri zajednička nedostatka. chrset="UTF 8" nije valjani atribut ili kodiranje i sada je charset="UTF-8". angular-route.js opterećen prije angular.min.js, koji baca grešku modula i nikada nije korišten - uklonjen je, kao i nekorištena jQuery referenca. Tekst je također tvrdio da je vrijednost "AngularJS", dok je kod postavljen na "Angular JS"; tekst se sada podudara.

Izlaz:

Filter malih slova u AngularJS

Niz s različitim veličinama slova u potpunosti se prikazuje malim slovima. Suprotna transformacija funkcionira na isti način.

Filter velikih slova u AngularJS

Ovaj filter je pandan filteru za mala slova, prikazujući svaki znak velikim slovom.

U nastavku, kontroler šalje niz znakova u pogled putem objekta scope, a filter ga pretvara u velika slova.

Filter velikih slova u AngularJS

<!-- 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 Objašnjenje

  1. Niz s različitim veličinama slova "Angular JS" smješten je u tutorialName i pridružen objektu opsega.
  2. Nakon simbola filtera (|) slijedi uppercase ključnu riječ, pa ugrađeni filtar cijeli niz prikazuje velikim slovima.

⚠️ Ispravak: Izvornik je ovaj odjeljak predstavio kao „primjer filtera za velika slova u AngularJS-u s opcijom malih slova“, što je dva puta pogrešno. Ovaj odjeljak demonstrira filter za velika slova, a AngularJS uopće nema filter za velika slova — pisanje samo prvog slova velikim slovom zahtijeva prilagođeni filter, koji se u kasnijim odjeljcima pokazuje kako izraditi.

Izlaz:

Filter velikih slova u AngularJS

Filtri velikih i malih slova ne primaju argumente. Sljedeći filtar pokazuje kako dvotočka prosljeđuje parametar filtru.

Filtar brojeva u AngularJS

Ovaj filter formatira broj i može ograničiti broj prikazanih decimalnih mjesta.

Primjer u nastavku koristi brojčani filter za prikaz vrijednosti ograničene na dva decimalna mjesta. Kontroler šalje broj u pogled putem objekta opsega, a filter se primjenjuje u pogledu.

Filtar brojeva u AngularJS

<!-- 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 Objašnjenje

  1. Broj s mnogo decimalnih mjesta smješten je u varijablu članicu pod nazivom tutorialID i pridružen objektu opsega.
  2. Nakon simbola filtera (|) slijedi number:2Dvotočka prenosi argument, a broj 2 postavlja dva decimalna mjesta. Vrijednost se zaokružuje za prikaz, pa se 3.565656 pojavljuje kao 3.57, dok opseg zadržava puni broj.

Izlaz:

Filtar brojeva u AngularJS

Formatiranje običnog broja često nije dovoljno kada vrijednost predstavlja novac, što je ono što sljedeći filter obrađuje.

Ne propustite:

Filtar valuta u AngularJS

Ovaj filtar formatira broj kao vrijednost valute, stavljajući mu prefiks simbola valute kao što je $.

U donjem primjeru, kontroler šalje broj u pogled putem objekta scope, a filter valute se primjenjuje u pogledu.

Filtar valuta u AngularJS

<!-- 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 Objašnjenje

  1. Broj se smješta u varijablu članicu pod nazivom tutorialprice i pridružen objektu opsega.
  2. Nakon simbola filtera (|) slijedi currency filtar.

⚠️ Ispravak: Izvornik je tvrdio da valuta „ovisi o jezičnim postavkama primijenjenim na računalu“. Ne ovisi o tome. AngularJS koristi lokalizaciju u paketu s bibliotekom, en-US prema zadanim postavkama, pa je simbol $ bez obzira na operativni sustav. Učitajte odgovarajuću vrijednost. angular-locale_*.js datoteku ili izravno proslijedite simbol: {{tutorialprice | currency:"£"}}.

Izlaz:

Filtar valuta u AngularJS

Nizovi znakova i brojevi su jednostavne vrijednosti. Posljednji ugrađeni filter obrađuje cijele objekte.

JSON filter u AngularJS

Ovaj filter pretvara objekt u formatirani JSON niz znakova, što je korisno za pregled podataka o opsegu tijekom razvoja.

U donjem primjeru, kontroler šalje objekt pogledu putem objekta opsega, a JSON filter se primjenjuje u pogledu.

JSON filter u AngularJS

<!-- 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 Objašnjenje

  1. Objekt koji drži TutorialID: 12 i tutorialName: "Angular" smještena je u varijablu člana pod nazivom tutorial i pridružen objektu opsega.
  2. Nakon simbola filtera (|) slijedi json filter koji serijalizira objekt u uvučeni JSON tekst.

⚠️ Ispravak: Izvornik je opisao ovu vrijednost kao "broj" i kao "niz znakova tipa JSON". Nije ni jedno ni drugo. To je JavaObjekt skripte, a json filter ga pretvara u JSON niz znakova za prikaz.

Izlaz:

JSON filter u AngularJS

Ovih pet filtera pokrivaju uobičajene slučajeve. Kada nijedan ne daje potreban rezultat, pišete vlastite.

Prilagođeni filtar AngularJS

Ponekad ugrađeni filtri u AngularJS-u ne mogu zadovoljiti zahtjeve za formatiranje izlaza. U takvom slučaju može se stvoriti prilagođeni AngularJS filtar koji vraća izlaz na potreban način.

Prilagođeni filter se registrira na modulu i zatim se ponaša potpuno isto kao ugrađeni. U donjim odjeljcima prvo su obuhvaćeni standardni filteri, budući da prilagođeni filter koristi istu sintaksu cijevi, a zatim je prikazano kako ga izgraditi.

Kako stvoriti prilagođeni filtar u AngularJS

U donjem primjeru, niz znakova prolazi od kontrolor na prikaz putem objekta opsega, ali ne bi trebao biti prikazan kakav jest. Prilagođeni filter u AngularJS dodaje još jedan niz i prikazuje dovršeni rezultat.

Stvorite prilagođeni filtar u AngularJS

<!-- 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 Objašnjenje

  1. Niz znakova „Angular“ smješten je u varijablu članicu pod nazivom tutorial i pridružen objektu opsega.
  2. AngularJS pruža filter metoda registracije koja se koristi za stvaranje prilagođenog filtra. 'Demofilter' je naziv koji mu je dodijeljen, a na taj naziv se prikaz odnosi.
  3. Ovo je standardni oblik prilagođenog filtera: registrirana funkcija je tvornica vraćajući funkciju koja obavlja rad. Ta funkcija prima vrijednost koja se filtrira kao svoj prvi parametar i vraća rezultat - ovdje, ulaz s dodanim "Tutorial".
  4. Filter se primjenjuje u prikazu pomoću iste sintakse okomite crte kao i bilo koji ugrađeni filter.

💡 Savjet: Nazivi filtera su obično mali ili se pišu velikim slovima. 'Demofilter' funkcionira, ali naziv poput appendTutorial bolje se čita i izbjegava sukob s ugrađenim imenom.

Izlaz:

Stvorite prilagođeni filtar u AngularJS

Riječ 'Tutorial' dodana je nizu znakova proslijeđenom u tutorial varijabla. Ovaj filtar uvijek dodaje isti tekst, koji sljedeći odjeljak čini konfiguriranim.

Kako prenijeti argumente prilagođenom filtru

Gornji filter fiksira tekst koji dodaje, tako da može učiniti samo jednu stvar. Ugrađeni filteri kao što su number:2 prihvati argument nakon dvotočke, a prilagođeni filtar također može: svaki parametar nakon prvog mapira se na argument odvojen dvotočkom u prikazu.

Uključena su tri koraka: dodavanje parametara nakon input U vraćenoj funkciji navedite zadanu vrijednost za sve što je opcionalno kako bi filter i dalje radio kada se argument izostavi, a zatim proslijedite argumente u prikazu odvojene dvotočkama.

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;
  };
});

Prikaz tada glasi kako slijedi, gdje "Vodič" postaje suffix i crtica postaje separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

Dva detalja je lako previdjeti. Argumenti su AngularJS izrazi, pa doslovni niz mora biti stavljen pod navodnike, dok se riječ bez navodnika čita kao svojstvo opsega. Filtri se također ulančavaju, svaki prima izlaz prethodnog: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Upozorenje: Održavajte filter čistim - isti izlaz za isti ulaz, bez vanjskih promjena. AngularJS kešira čisti filter i ponovno ga pokreće samo kada se ulaz promijeni. Filter koji čita sat ili mutira uslugu mora biti označen $stateful, što onemogućuje to predmemoriranje i pokreće filter u svakom ciklusu sažetka, što je čest uzrok sporih stranica.

Filtri nisu ograničeni na predloške. Isti filter može se pozvati iz JavaSkripta, kao što je prikazano u nastavku.

Kako koristiti filtere u kontroleru s uslugom $filter

Primjena filtera u prikazu je uobičajen slučaj, ali transformirana vrijednost je ponekad potrebna unutar kontrolera, na primjer prije slanja podataka na poslužitelj. AngularJS izlaže svaki registrirani filter, ugrađeni i prilagođeni, putem $filter usluga. Ubrizgajte ga, pozovite ga s nazivom filtera kako biste dohvatili funkciju filtera, a zatim ga pozovite s vrijednošću i svim argumentima.

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");
}]);

Postoji i kraći oblik: ubrizgavanje naziva filtera nakon kojeg slijedi Filter, Kao što su uppercaseFilter, izravno pruža funkciju filtera i ona se može odmah pozvati. Oba oblika rezultiraju istom funkcijom, pa je izbor stilski.

Dvije upotrebe se ponavljaju. Prva je priprema korisnog tereta: datum obično mora doći do API-ja u fiksnom obrascu i $filter('date')(value, 'yyyy-MM-dd') stvara ga bez dodirivanja vrijednosti vezane za obrazac. Drugo je sužavanje kolekcije jednom u kontroleru, umjesto ostavljanja orderBy u ng-ponovi izraz gdje se ponovno pokreće pri svakom sažetku.

Filteri ubrizgani na ovaj način i dalje su registrirani na modulu, stoga se prilagođeni filter mora deklarirati s app.filter prije nego što bilo koji kontrolor pita $filter za to. Inače AngularJS izbacuje grešku nepoznatog pružatelja.

Pozivanje filtera JavaSkripta se od predloška razlikuje na jedan važan način: rezultat se izračunava jednom i pohranjuje u opsegu, umjesto da se ponovno izračunava pri svakom sažetku. To je čini bržom opcijom za vrijednost koja se rijetko mijenja, a pogrešnom opcijom za onu koja se mora track korisničkog unosa.

Pitanja i odgovori

Ne. AngularJS isporučuje samo mala i velika slova. Veliko početno slovo svake riječi zahtijeva prilagođeni filtar koji dijeli niz i ponovno ga gradi ili CSS pravilo za transformaciju teksta ako je promjena isključivo vizualna.

Filter je registriran na drugom modulu od onog koji je pokrenuo ng-app ili se skripta koja ga definira pokreće prije učitavanja AngularJS-a. Registrirajte filter na istom modulu i prvo učitajte biblioteku.

Da. Piping kolekcija unutra ng-ponovi filtrira ili sortira stavke prije nego što se prikažu. Filter prima cijeli niz i mora vratiti niz.

Da. AI Asistenti iz jednostavnog opisa pravila formatiranja izrađuju tvornicu, vraćenu funkciju i sintaksu prikaza. Provjerite štiti li generirani filtar od nedefiniranog unosa.

Alati umjetne inteligencije prepisuju tvornicu kao klasu koja implementira PipeTransform i premještaju svaki dodatni parametar u metodu transformacije. RevRučno pregledajte bilo koji $stateful filter, jer se nečisti cjevovodi moraju eksplicitno deklarirati.

Sažmite ovu objavu uz: