AngularJS-suodattimet ja AngularJS-muokattu suodatin esimerkillä
James Hartman
⚡ Älykäs yhteenveto
AngularJS:n suodatin muotoilee lausekkeen arvon näytettäväksi muuttamatta pohjana olevaa dataa. Sisäänrakennetut suodattimet kattavat kirjainkoon, numerot, valuutan ja JSON-muotoilun, kun taas mukautettu suodatin käsittelee kaikki muotoilusäännöt, joita kehys ei vielä tarjoa.
Mikä on AngularJS:n suodatin?
A Suodatin AngularJS:ssä auttaa muotoilemaan lausekkeen arvon näytettäväksi käyttäjälle muuttamatta alkuperäistä arvoa. Jos esimerkiksi haluat merkkijonon näkyvän joko pieninä tai isoina kirjaimina, voit tehdä sen suodattimien avulla. Sisäänrakennetut suodattimet, kuten 'pienet kirjaimet' ja 'isot kirjaimet', palauttavat merkkijonon pyydetyssä kirjainkokossa, ja lisäsuodattimia on olemassa numeroille, valuutoille ja JSON-tiedostoille.
⚠️ Versiohuomautus: AngularJS (1.x-haara) lopetti toimintansa 31. joulukuuta 2021, eikä sille ole enää saatavilla tietoturvapäivityksiä. Kaikki alla oleva pysyy voimassa olemassa olevien AngularJS-sovellusten ylläpidon osalta; nykyaikaisessa Angularissa sama rooli on putkella.
Suodattimia käytetään näkymässä pystyviivan avulla. Ennen kuin tarkastelet kutakin suodatinta, on hyvä tietää, miksi kirjoittaisit oman suodattimen.
Pienet kirjaimet AngularJS:ssä
Tämä suodatin ottaa merkkijonon ja näyttää kaikki sen merkit pienillä kirjaimilla.
Alla olevassa kuvassa ohjain lähettää merkkijonon näkymään scope-objektin kautta, ja suodatin muuntaa sen pieniksi kirjaimiksi.
<!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 Selitys
- Sekakirjainkokoja sisältävä merkkijono ”Angular JS” sijoitetaan jäsenmuuttujaan nimeltä
tutorialNamelaajuusobjektissa. - Suodatinsymboli (|) merkitsee muunnoksen tulosteen ja
lowercaseavainsana käyttää sisäänrakennettua suodatinta, joka renderöi koko merkkijonon pienillä kirjaimilla.
⚠️ Korjaukset tehty jokaiseen ilmoitukseen. Kaikilla kuudella alkuperäisellä esimerkillä oli kolme yhteistä puutetta. chrset="UTF 8" ei ole kelvollinen attribuutti tai koodaus, ja on nyt charset="UTF-8". angular-route.js ladattu ennen angular.min.js, joka aiheuttaa moduulivirheen, eikä sitä koskaan käytetty – se on poistettu, kuten myös käyttämätön jQuery-viittaus. Tekstissä väitettiin myös arvon olevan ”AngularJS”, vaikka koodi asetti sen ”Angular JS”; teksti vastaa nyt arvoa.
lähtö:
Sekakirjainkokoisia kirjaimia sisältävä merkkijono hahmonnetaan kokonaan pienillä kirjaimilla. Päinvastainen muunnos toimii samalla tavalla.
Isot kirjaimet AngularJS:ssä
Tämä suodatin on pienten kirjainten suodattimen vastinpari, joka näyttää kaikki merkit isoilla kirjaimilla.
Alla olevassa kuvassa ohjain lähettää merkkijonon näkymään scope-objektin kautta, ja suodatin muuntaa sen isoiksi kirjaimiksi.
<!-- 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 Selitys
- Sekakirjoitettu merkkijono ”Angular JS” sijoitetaan
tutorialNameja liitetty laajuusobjektiin. - Suodatinsymbolin (|) perässä on
uppercaseavainsana, joten sisäänrakennettu suodatin näyttää koko merkkijonon isoilla kirjaimilla.
⚠️ korjaus: Alkuperäisessä tekstissä tämä osio esiteltiin "esimerkkinä AngularJS:n isojen kirjainten suodattimesta pienten kirjainten asetuksilla", mikä on kahdesti väärin. Tässä osiossa esitellään isojen kirjainten suodatin, eikä AngularJS:ssä ole lainkaan isojen kirjainten suodatinta – vain ensimmäisen kirjaimen kirjoittaminen isolla kirjaimella vaatii mukautetun suodattimen, jonka rakentaminen näytetään myöhemmissä osioissa.
lähtö:
Kirjainkokosuodattimet eivät hyväksy argumentteja. Seuraava suodatin näyttää, kuinka kaksoispiste välittää parametrin suodattimelle.
Numerosuodatin AngularJS:ssä
Tämä suodatin muotoilee luvun ja voi rajoittaa näytettävien desimaalien määrää.
Alla olevassa esimerkissä käytetään numerosuodatinta näyttämään kahden desimaalin tarkkuudella rajoitettu arvo. Ohjain lähettää numeron näkymään scope-objektin kautta, ja suodatinta käytetään näkymässä.
<!-- 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 Selitys
- Useita desimaaleja sisältävä luku sijoitetaan jäsenmuuttujaan nimeltä
tutorialIDja liitetty laajuusobjektiin. - Suodatinsymbolin (|) perässä on
number:2Kaksoispiste välittää argumentin ja luku 2 asettaa kaksi desimaalia. Arvo pyöristetään näyttöä varten, joten 3.565656 näkyy muodossa 3.57, kun taas osoitus säilyttää koko luvun.
lähtö:
Pelkän numeron muotoilu ei usein riitä, kun arvo edustaa rahaa, mitä seuraava suodatin käsittelee.
Valuuttasuodatin AngularJS:ssä
Tämä suodatin muotoilee luvun valuutta-arvoksi lisäämällä siihen valuuttasymbolin, kuten $.
Alla olevassa esimerkissä ohjain lähettää numeron näkymään scope-objektin kautta ja valuuttasuodatinta käytetään näkymässä.
<!-- 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 Selitys
- Numero sijoitetaan jäsenmuuttujaan nimeltä
tutorialpriceja liitetty laajuusobjektiin. - Suodatinsymbolin (|) perässä on
currencysuodattaa.
⚠️ korjaus: Alkuperäisessä väitettiin, että valuutta "riippuu koneeseen käytetyistä kieliasetuksista". Se ei kuitenkaan ole. AngularJS käyttää kirjaston mukana tulevaa kieliasetusta, joka on oletuksena en-US, joten symboli on $ käyttöjärjestelmästä riippumatta. Lataa vastaava angular-locale_*.js tiedosto tai anna symboli suoraan: {{tutorialprice | currency:"£"}}.
lähtö:
Merkkijonot ja numerot ovat yksinkertaisia arvoja. Viimeinen sisäänrakennettu suodatin käsittelee kokonaisia objekteja.
JSON-suodatin AngularJS:ssä
Tämä suodatin muuntaa objektin muotoilluksi JSON merkkijono, joka on hyödyllinen laajuusdatan tarkastelussa kehityksen aikana.
Alla olevassa esimerkissä ohjain lähettää objektin näkymään scope-objektin kautta ja JSON-suodatinta käytetään näkymässä.
<!-- 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 Selitys
- Esine, jossa on
TutorialID: 12jatutorialName: "Angular"sijoitetaan jäsenmuuttujaan nimeltätutorialja liitetty laajuusobjektiin. - Suodatinsymbolin (|) perässä on
jsonsuodatin, joka sarjoittaa objektin sisennettyyn JSON-tekstiin.
⚠️ korjaus: Alkuperäisessä teoksessa tätä arvoa kuvailtiin "numeroksi" ja "JSON-tyyppiseksi merkkijonoksi". Se ei ole kumpaakaan. Se on JavaScript-objekti, ja json-suodatin muuntaa sen näytettäväksi JSON-merkkijonoksi.
lähtö:
Nämä viisi suodatinta kattavat yleisimmät tapaukset. Kun mikään niistä ei tuota tarvitsemaasi tulosta, kirjoitat oman.
AngularJS mukautettu suodatin
Joskus AngularJS:n sisäänrakennetut suodattimet eivät täytä tulosteen muotoiluvaatimuksia. Tällaisessa tapauksessa voidaan luoda mukautettu AngularJS-suodatin, joka palauttaa tulosteen vaaditulla tavalla.
Mukautettu suodatin rekisteröidään moduuliin, ja se toimii täsmälleen kuten sisäänrakennettu suodatin. Seuraavissa osioissa käsitellään ensin vakiosuodattimia, koska mukautettu suodatin käyttää samaa putkisyntaksia, ja näytetään sitten, miten sellainen rakennetaan.
Kuinka luoda mukautettu suodatin AngularJS: ssä
Alla olevassa esimerkissä merkkijono kulkee kohdasta ohjain näkymään laajuusobjektin kautta, mutta sitä ei pitäisi näyttää sellaisenaan. Mukautettu suodatin kohdassa angularjs lisää toisen merkkijonon ja näyttää valmiin tuloksen.
<!-- 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 Selitys
- Merkkijono ”Angular” sijoitetaan jäsenmuuttujaan nimeltä
tutorialja liitetty laajuusobjektiin. - AngularJS tarjoaa
filterrekisteröintimenetelmä, jota käytetään mukautetun suodattimen luomiseen. Sille annetaan nimi 'Demofilter', ja näkymä viittaa tähän nimeen. - Tämä on mukautetun suodattimen vakiomuoto: rekisteröity funktio on tehdas palauttaa työn tekevän funktion. Tämä funktio saa suodatettavan arvon ensimmäiseksi parametrikseen ja palauttaa tuloksen – tässä tapauksessa syötteen, johon on liitetty ”Tutorial”.
- Suodatinta käytetään näkymässä samalla pystyviivasyntaksilla kuin mitä tahansa sisäänrakennettua suodatinta.
💡 Vinkki: Suodattimien nimet kirjoitetaan yleensä pienillä kirjaimilla tai camelCase-alkuperäisillä kirjaimilla. 'Demofilter' toimii, mutta nimi, kuten appendTutorial lukee paremmin ja välttää törmäykset sisäänrakennetun nimen kanssa.
lähtö:
Sana 'Tutorial' on lisätty annettuun merkkijonoon. tutorial muuttuja. Tämä suodatin lisää aina saman tekstin, jonka voi määrittää seuraavassa osiossa.
Argumenttien välittäminen mukautetulle suodattimelle
Yllä oleva suodatin koodaa liittämänsä tekstin kiinteästi, joten se voi tehdä vain yhden asian. Sisäänrakennetut suodattimet, kuten number:2 hyväksyy argumentin kaksoispisteen jälkeen, ja mukautettu suodatin voi myös: jokainen ensimmäisen jälkeen oleva parametri yhdistetään kaksoispisteellä erotettuun argumenttiin näkymässä.
Kolme vaihetta on mukana: lisää parametrit jälkeen input Anna palautetussa funktiossa oletusarvo kaikille valinnaisille arvoille, jotta suodatin toimii edelleen, kun argumentti jätetään pois, ja välitä sitten argumentit näkymässä kaksoispisteillä erotettuina.
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; }; });
Näkymä kuuluu sitten seuraavasti, jossa sanasta ”Tutorial” tulee suffix ja yhdysmerkistä tulee separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Kaksi yksityiskohtaa on helppo jättää huomiotta. Argumentit ovat AngularJS-lausekkeita, joten literaalimerkkijono on laitettava lainausmerkkeihin, kun taas lainausmerkeissä oleva sana luetaan scope-ominaisuutena. Suodattimet myös ketjuttavat, jolloin kukin vastaanottaa edellisen suodattimen tuotoksen: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Varoitus: Pidä suodatin puhtaana — sama tuloste samalle syötteelle, ei ulkoisia muutoksia. AngularJS tallentaa puhtaan suodattimen välimuistiin ja suorittaa sen uudelleen vain, kun syöte muuttuu. Suodatin, joka lukee kellon tai muuttaa palvelun arvoa, on merkittävä. $stateful, joka poistaa välimuistin käytöstä ja suorittaa suodattimen jokaisella tiivistesyklillä, mikä on yleinen syy hitaille sivuille.
Suodattimet eivät rajoitu malleihin. Samaa suodatinta voidaan kutsua mistä tahansa JavaSkripti, kuten seuraavassa näkyy.
Suodattimien käyttö ohjaimessa $filter-palvelun avulla
Suodattimen käyttäminen näkymässä on yleinen tapa, mutta muunnettua arvoa tarvitaan joskus ohjaimen sisällä, esimerkiksi ennen datan lähettämistä palvelimelle. AngularJS näyttää kaikki rekisteröidyt suodattimet, sekä sisäänrakennetut että mukautetut, suodattimen kautta. $filter palvelu. Injektoi se, kutsu sitä suodattimen nimellä hakeaksesi suodatinfunktion ja kutsu sitten sitä arvolla ja mahdollisilla argumenteilla.
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"); }]);
Lyhyempi muoto on myös olemassa: suodattimen nimen syöttäminen ja sen perään Filter, Kuten uppercaseFilter, tarjoaa suodatinfunktion suoraan ja sitä voidaan kutsua välittömästi. Molemmat muodot antavat saman funktion, joten valinta on tyylillinen.
Kaksi käyttötarkoitusta tulee toistuvasti esiin. Ensimmäinen on hyötykuorman valmistelu: päivämäärän on yleensä saavutettava API kiinteän kaavan mukaisesti, ja $filter('date')(value, 'yyyy-MM-dd') tuottaa sen koskematta lomakkeeseen sidottuun arvoon. Toinen on kokoelman rajaaminen ohjaimessa sen sijaan, että se jätettäisiin orderBy vuonna ng-toista lauseke, jossa se suoritetaan uudelleen jokaisella tiivistelmällä.
Tällä tavoin injektoidut suodattimet rekisteröidään edelleen moduuliin, joten mukautettu suodatin on määriteltävä seuraavasti: app.filter ennen kuin yksikään valvoja kysyy $filter Muuten AngularJS heittää tuntemattoman toimittajan virheen.
Suodattimen kutsuminen sisään JavaSkripti eroaa mallineesta yhdellä tärkeällä tavalla: tulos lasketaan kerran ja tallennetaan laajuusohjelmaan sen sijaan, että se laskettaisiin uudelleen jokaisella tiivisteellä. Tämä tekee siitä nopeamman vaihtoehdon arvolle, joka muuttuu harvoin, ja väärän vaihtoehdon arvolle, joka on pakko track käyttäjän syöte.
