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

Autor: James Hartman James Hartman
Hours Ajakohastatud

⚡ Nutikas kokkuvõte

AngularJS-i filter vormindab avaldise väärtuse kuvamiseks ilma alusandmeid muutmata. Sisseehitatud filtrid hõlmavad suur- ja väiketähti, numbreid, valuutat ja JSON-i, samas kui kohandatud filter käsitleb kõiki vormindusreegleid, mida raamistik veel ei paku.

  • 🧾 Põhiprintsiip: Filter teisendab ainult seda, mida vaade kuvab; ulatusobjektil olevat väärtust ei muudeta kunagi.
  • ➖ Pipe'i süntaks: Vertikaalne kriips eraldab avaldist filtri nimest ja koolon annab sellele argumendi.
  • 🔤 Juhtumifiltrid: Väike- ja suurtähed teisendavad stringi kuvamiseks ning AngularJS-is puudub suurtähtede filter.
  • 🔢 Number ja valuuta: „number” piirab kümnendkohtade arvu, samas kui „currency” lisab väärtuse ette lokaadipõhise sümboli.
  • 🛠️ Kohandatud filtrid: Funktsiooni tagastava tehase registreerimine loob kogu moodulis saadaoleva korduvkasutatava filtri.
  • ⚡ Puhtus on oluline: Filter peab sama sisendi korral tagastama sama väljundi, sest AngularJS vahemällu salvestab tulemused ja jätab puhaste filtrite uuesti käivitamise vahele.
Loe rohkem

AngularJS filtrid ja kohandatud filter

Mis on AngularJS-i filter?

A Filtreerige AngularJS-is aitab vormindada avaldise väärtust kasutajale kuvamiseks ilma algset väärtust muutmata. Näiteks kui soovite, et string kuvataks kas väike- või suurtähelisena, saate seda teha filtrite abil. Sisseehitatud filtrid, näiteks „väiketähed” ja „suurtähed”, tagastavad stringi soovitud tähesuuruses ning numbrite, valuuta ja JSON-i jaoks on olemas täiendavad filtrid.

⚠️ Versiooni märkus: AngularJS (haru 1.x) jõudis 31. detsembril 2021 oma eluea lõppu ja ei saa enam turvapaiku. Kõik alljärgnev jääb olemasolevate AngularJS-i rakenduste haldamiseks samaks; tänapäevases Angularis täidab sama rolli toru.

Filtreid rakendatakse vaates püstkriipsu abil. Enne igaühe vaatamist on kasulik teada, miks te peaksite oma filtreid kirjutama.

AngularJS-i väiketähtedega filter

See filter võtab stringi ja kuvab kõik selle tähemärgid väiketähtedega.

Allpool saadab kontroller ulatusobjekti kaudu vaatele stringi ja filter teisendab selle väiketähtedeks.

AngularJS-i väiketähtedega filter

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

  1. Suur- ja väiketähtedega string „Angular JS” paigutatakse liikmesmuutujasse nimega tutorialName ulatusobjektil.
  2. Filtri sümbol (|) tähistab teisenduse väljundit ja lowercase märksõna rakendab sisseehitatud filtrit, mis kuvab kogu stringi väiketähtedega.

⚠️ Parandused rakendati igale kuulutusele. Kõigil kuuel algsel näitel oli kolm ühist puudust. chrset="UTF 8" ei ole kehtiv atribuut ega kodeering ja on nüüd charset="UTF-8". angular-route.js koormatud enne angular.min.js, mis tekitab moodulivea ja mida kunagi ei kasutatud – see on eemaldatud, nagu ka kasutamata jQuery viide. Tekstis väideti ka, et väärtus oli „AngularJS“, samas kui kood määras väärtuseks „Angular JS“; tekst vastab nüüd väärtusele.

Väljund:

AngularJS-i väiketähtedega filter

Suur- ja väiketähtedega string renderdatakse tervikuna väiketähtedega. Vastupidine teisendus toimib samamoodi.

AngularJS-i suurtähtedega filter

See filter on väiketähtede filtri vaste, kuvades kõik tähed suurtähtedega.

Allpool saadab kontroller ulatusobjekti kaudu vaatele stringi ja filter teisendab selle suurtähtedeks.

AngularJS-i suurtähtedega filter

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

  1. Suur- ja väiketähtedega string „Angular JS” paigutatakse tutorialName ja on ulatusobjekti külge kinnitatud.
  2. Filtri sümbolile (|) järgneb uppercase märksõna, seega kuvab sisseehitatud filter kogu stringi suurtähtedega.

⚠️ Parandus: Algselt tutvustati seda jaotist kui „näidet AngularJS-i suurtähtede filtrist koos väiketähtede valikuga“, mis on kaks korda vale. See jaotis demonstreerib suurtähtede filtrit ja AngularJS-il pole üldse suurtähtede filtrit – ainult esimese tähe suurtähtedeks kirjutamine nõuab kohandatud filtrit, mille loomist näidatakse hilisemates jaotistes.

Väljund:

AngularJS-i suurtähtedega filter

Suur- ja väiketähtede filtrid ei aktsepteeri argumente. Järgmine filter näitab, kuidas koolon edastab filtrile parameetri.

Numbrifilter AngularJS-is

See filter vormindab arvu ja saab piirata kuvatavate kümnendkohtade arvu.

Allolev näide kasutab kahe kümnendkoha täpsusega väärtuse kuvamiseks numbrifiltrit. Kontroller saadab arvu vaatele ulatusobjekti kaudu ja filter rakendatakse vaates.

Numbrifilter AngularJS-is

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

  1. Paljude kümnendkohtadega arv paigutatakse liikmesmuutujasse nimega tutorialID ja on ulatusobjekti külge kinnitatud.
  2. Filtri sümbolile (|) järgneb number:2Koolon edastab argumendi ja arv 2 määrab kaks kümnendkohta. Väärtus ümardatakse kuvamiseks, seega kuvatakse 3.565656 kujul 3.57, samas kui ulatus säilitab täisarvu.

Väljund:

Numbrifilter AngularJS-is

Lihtarvu vormindamisest ei piisa sageli, kui väärtus tähistab raha, millega tegeleb järgmine filter.

SEOTUD ARTIKLID

AngularJS-i valuutafilter

See filter vormindab arvu valuutaväärtusena, lisades sellele ette valuutasümboli, näiteks $.

Allolevas näites saadab kontroller ulatusobjekti kaudu vaatele numbri ja vaates rakendatakse valuutafiltrit.

AngularJS-i valuutafilter

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

  1. Arv paigutatakse liikmesmuutujasse nimega tutorialprice ja on ulatusobjekti külge kinnitatud.
  2. Filtri sümbolile (|) järgneb currency filter.

⚠️ Parandus: Algselt väideti, et valuuta „sõltub masinale rakendatud keelesätetest”. See ei sõltu. AngularJS kasutab vaikimisi teeki kaasasolevat lokaati en-US, seega on sümbol $ olenemata operatsioonisüsteemist. Laadige sobiv angular-locale_*.js faili või edasta sümbol otse: {{tutorialprice | currency:"£"}}.

Väljund:

AngularJS-i valuutafilter

Stringid ja numbrid on lihtväärtused. Viimane sisseehitatud filter tegeleb tervete objektidega.

JSON-filter AngularJS-is

See filter teisendab objekti vormindatud kujule. JSON string, mis on kasulik ulatusandmete kontrollimiseks arenduse ajal.

Allolevas näites saadab kontroller ulatusobjekti kaudu vaatele objekti ja vaates rakendatakse JSON-filtrit.

JSON-filter AngularJS-is

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

  1. Objekt, mis hoiab TutorialID: 12 ja tutorialName: "Angular" paigutatakse liikmesmuutujasse nimega tutorial ja on ulatusobjekti külge kinnitatud.
  2. Filtri sümbolile (|) järgneb json filter, mis serialiseerib objekti taandatud JSON-tekstiks.

⚠️ Parandus: Algselt kirjeldati seda väärtust kui „numbrit“ ja „JSON-tüüpi stringi“. See pole kumbki. See on JavaSkriptiobjekt ja JSON-filter teisendab selle kuvamiseks JSON-stringiks.

Väljund:

JSON-filter AngularJS-is

Need viis filtrit hõlmavad levinumaid juhtumeid. Kui ükski neist ei anna vajalikku väljundit, kirjutate oma.

AngularJS kohandatud filter

Mõnikord ei pruugi AngularJS-i sisseehitatud filtrid väljundi vormindamise nõuetele vastata. Sellisel juhul saab luua AngularJS-i kohandatud filtri, mis tagastab väljundi nõutaval viisil.

Kohandatud filter registreeritakse moodulisse ja seejärel käitub täpselt nagu sisseehitatud filter. Allolevad jaotised käsitlevad kõigepealt standardfiltreid, kuna kohandatud filter kasutab sama torusüntaksit, ja näitavad seejärel, kuidas seda luua.

Kuidas luua AngularJS-is kohandatud filtrit

Allolevas näites läbib string kontroller vaatele ulatusobjekti kaudu, kuid seda ei tohiks kuvada sellisena, nagu see on. Kohandatud filter AngularJS lisab uue stringi ja kuvab lõpptulemuse.

Looge AngularJS-is kohandatud filter

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

  1. String „Angular” paigutatakse liikmesmuutujasse nimega tutorial ja on ulatusobjekti külge kinnitatud.
  2. AngularJS pakub filter Kohandatud filtri loomiseks kasutatav registreerimismeetod. Sellele antakse nimi „Demofilter” ja vaade viitab sellele nimele.
  3. See on kohandatud filtri standardkuju: registreeritud funktsioon on tehas tagastades funktsiooni, mis töö teeb. See funktsioon saab filtreeritava väärtuse oma esimese parameetrina ja tagastab tulemuse – antud juhul sisendi, millele on lisatud „Õpetus”.
  4. Filtrit rakendatakse vaates sama torusüntaksi abil nagu iga sisseehitatud filtrit.

👍 Vihje: Filtrite nimed on tavaliselt väiketähed või camelCase'id. „Demofilter” töötab, aga nimi nagu appendTutorial loeb paremini ja väldib konflikte sisseehitatud nimega.

Väljund:

Looge AngularJS-is kohandatud filter

Sõna „Õpetus” on lisatud edastatud stringile. tutorial muutuja. See filter lisab alati sama teksti, mille järgmises jaotises saab konfigureerida.

Kuidas edastada argumente kohandatud filtrile

Ülaltoodud filter kodeerib lisatava teksti kõvakodeeringu abil, seega saab see teha ainult ühte asja. Sisseehitatud filtrid, näiteks number:2 aktsepteerib argumenti pärast koolonit ja seda saab teha ka kohandatud filter: iga parameeter pärast esimest seostatakse vaates kooloniga eraldatud argumendiga.

See hõlmab kolme sammu: parameetrite lisamine pärast input Tagastatud funktsioonis sisesta vaikeväärtus kõigi valikuliste väärtuste jaoks, et filter töötaks ka argumendi väljajätmisel, seejärel edasta argumendid vaates koolonitega eraldatuna.

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

Seejärel on vaade järgmine, kus „Õpetus” muutub suffix ja sidekriips muutub separator.

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

Kaks detaili on kergesti märkamata. Argumendid on AngularJS-i avaldised, seega tuleb sõnasõnaline string jutumärkidesse panna, samas kui jutumärkideta sõna loetakse ulatuse atribuudina. Filtrid aheldavad ka, igaüks neist saab eelmise väljundi: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Hoiatus: Hoidke filter puhas – sama väljund sama sisendi jaoks, ilma väliste muudatusteta. AngularJS vahemällu salvestab puhta filtri ja käivitab selle uuesti ainult siis, kui sisend muutub. Filter, mis loeb kellaaega või muudab teenust, tuleb märgistada. $stateful, mis keelab vahemällu salvestamise ja käivitab filtri igal kokkuvõtete tsüklil, mis on lehtede aeglase laadimise sagedane põhjus.

Filtrid ei ole mallidega piiratud. Sama filtrit saab kutsuda ka JavaSkript, nagu järgmisena näidatud.

Kuidas kasutada filtreid kontrolleris $filter teenusega

Filtri rakendamine vaates on tavaline juhtum, kuid teisendatud väärtust on mõnikord vaja kontrolleris sees, näiteks enne andmete serverisse saatmist. AngularJS avaldab kõik registreeritud filtrid, nii sisseehitatud kui ka kohandatud, läbi $filter teenus. Süstige see, kutsuge seda filtri nimega, et saada filtrifunktsioon, seejärel kutsuge see välja väärtuse ja mis tahes argumentidega.

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

Samuti on olemas lühem vorm: filtri nime sisestamine, millele järgneb FilterNagu uppercaseFilter, annab filtrifunktsiooni otse ja seda saab kohe kutsuda. Mõlemad vormid annavad sama funktsiooni, seega on valik stiililine.

Kaks kasutusvõimalust kerkivad korduvalt esile. Esimene on kasuliku koormuse ettevalmistamine: kuupäev peab tavaliselt API-ni jõudma kindla mustri järgi ja $filter('date')(value, 'yyyy-MM-dd') loob selle vormiga seotud väärtust puudutamata. Teine on kollektsiooni kitsendamine kontrolleris, selle asemel, et see alles jätta orderBy aastal ng-korda avaldis, kus see kordub igal kokkuvõttel.

Sel viisil süstitud filtrid registreeritakse endiselt moodulis, seega tuleb deklareerida kohandatud filter koos app.filter enne kui ükski kontroller küsib $filter selle jaoks. Vastasel juhul viskab AngularJS tundmatu pakkuja vea.

Filtri kutsumine JavaSkript erineb mallist ühe olulise moel: tulemus arvutatakse üks kord ja salvestatakse ulatusse, mitte ei arvutata seda iga kokkuvõtte puhul uuesti. See teeb sellest kiirema valiku harva muutuva väärtuse puhul ja vale valiku sellise väärtuse puhul, mis peab muutuma. track kasutaja sisend.

KKK

Ei. AngularJS kasutab ainult suur- ja väiketähti. Iga sõna esimese tähe suurtähtedega alustamiseks on vaja kohandatud filtrit, mis jagab stringi ja loob selle uuesti, või CSS-i teksti teisendamise reeglit, kui muudatus on puhtalt visuaalne.

Filter on registreeritud erinevas moodulis kui see, mille ng-app käivitas, või käivitatakse seda defineeriv skript enne AngularJS-i laadimist. Registreeri filter samasse moodulisse ja laadi esmalt teek.

Jah. Pii.ping kollektsioon sees ng-korda filtreerib või järjestab üksusi enne nende renderdamist. Filter saab kogu massiivi ja peab tagastama massiivi.

Jah. AI Assistendid loovad vormindusreegli lihtsa kirjelduse põhjal tehase, tagastatud funktsiooni ja vaate süntaksi. Kontrollige, et loodud filter kaitseb määratlemata sisendi eest.

Tehisintellekti tööriistad kirjutavad tehase ümber klassiks, mis rakendab PipeTransformi, ja liigutavad iga lisaparameetri teisendusmeetodisse. RevVaadake kõiki olekupõhiseid filtreid käsitsi, sest ebapuhtad torud tuleb selgesõnaliselt deklareerida.

Võta see postitus kokku järgmiselt: