Kas ir filtrs AngularJS?
Filtrē angularjs palīdz formatēt vērtību, izteiksmes displeju lietotājam nemainot oriģinālo formātu. Piemēram, ja vēlaties, lai virkne būtu vai nu ar mazajiem, vai ar lielajiem burtiem, to varat izdarīt, izmantojot filtrus. Ir iebūvēti filtri, piemēram, “mazie burti”, “lielie burti”, kas attiecīgi var izgūt mazos un lielos burtus.
Līdzīgi skaitļiem varat izmantot citus filtrus.
Šīs apmācības laikā mēs redzēsim dažādus standarta iebūvētos filtrus, kas pieejami Angular.
Šajā apmācībā jūs uzzināsiet
- Mazo burtu filtrs leņķiskajāJS
- Lielo burtu filtrs leņķiskajā JS
- Skaitļu filtrs leņķiskajāJS
- Valūtas filtrs AngularJS
- JSON filtrs leņķiskajāJS
Mazo burtu filtrs leņķiskajāJS
Šis filtrs iegūst virknes izvadi un formatē virkni un visas virknes rakstzīmes parāda kā mazos burtus.
Apskatīsim AngularJS filtru piemēru ar opciju AngularJS tolowercase.
Zemāk sniegtajā piemērā mēs izmantosim kontrolieri, lai nosūtītu virkni skatam, izmantojot darbības jomas objektu. Pēc tam skatā izmantosim filtru, lai virkni pārveidotu par mazajiem burtiem.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is
Koda skaidrojums:
- Šeit mēs nododam virkni, kas ir mazo un lielo burtu kombinācija dalībnieka mainīgajā ar nosaukumu "tutorialName", un pievienojam to darbības objekta objektam. Pārnestās virknes vērtība ir "AngularJS".
- Mēs izmantojam locekļa mainīgo "tutorialName" un ievietojam filtra simbolu (|), kas nozīmē, ka izeja ir jāmaina, izmantojot filtru. Pēc tam mēs izmantojam mazo burtu atslēgvārdu, lai teiktu, ka izmantojiet iebūvēto filtru, lai visu virkni izvadītu ar mazajiem burtiem.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var redzēt, ka ir izpildīta virkne "AngularJS", kas tika nodota mainīgajā pamācībāName, kas bija mazo un lielo burtu kombinācija.
- Pēc izpildes gala produkcija ir mazajiem burtiem, kā parādīts iepriekš.
Lielo burtu filtrs leņķiskajā JS
Šis filtrs ir līdzīgs mazo burtu filtram; atšķirība ir tāda, ka virknes izvads tiek formatēts un virknē tiek parādītas visas rakstzīmes kā lielie burti.
Apskatīsim lielo burtu filtru AngularJS piemēru ar opciju mazie burti.
Zemāk redzamajā AngularJS lielo burtu piemērā mēs izmantosim kontrolleri, lai nosūtītu virkni skatam, izmantojot sfēra objektu. Pēc tam skatā izmantosim filtru, lai virkni pārveidotu par lielo burtu.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Koda skaidrojums:
- Šeit mēs nododam virkni, kas ir mazo un lielo burtu "Angular JS" kombinācija dalībnieka mainīgajā ar nosaukumu "tutorialName", un pievienojam to sfēra objektam.
- Mēs izmantojam locekļa mainīgo "tutorialName" un ievietojam filtra simbolu (|), kas nozīmē, ka izeja ir jāmaina, izmantojot filtru. Pēc tam mēs izmantojam lielo burtu atslēgvārdu, lai teiktu, ka izmantojiet iebūvēto filtru, lai izvadītu visu virkni ar lielajiem burtiem.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var redzēt, ka virkne, kas tika nodota mainīgajā pamācībāName, kas bija mazo un lielo burtu kombinācija, ir izvadīta ar visiem lielajiem burtiem.
Skaitļu filtrs leņķiskajāJS
Šis filtrs formatē skaitli un var piemērot ierobežojumu skaitlim aiz komata.
Apskatīsim AngularJS filtru piemēru ar skaitļa opciju.
Tālāk sniegtajā piemērā
Mēs vēlējāmies parādīt, kā mēs varam izmantot skaitļu filtru, lai formatētu skaitli, kas jāparāda ar ierobežojumu 2 zīmes aiz komata.
Mēs izmantosim kontrolieri, lai nosūtītu numuru skatam, izmantojot darbības jomas objektu. Pēc tam skatā izmantosim filtru, lai lietotu skaitļu filtru.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Koda skaidrojums:
- Šeit mēs nododam skaitli ar lielāku decimāldaļu skaitu dalībnieka mainīgajā, ko sauc par tutorialID, un pievienojam to sfēra objektam.
- Mēs izmantojam locekļa mainīgo tutorialID un ievietojam filtra simbolu (|) kopā ar skaitļa filtru. Tagad skaitlis: 2 abi norāda, ka filtram jāierobežo decimālzīmju skaits līdz 2.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var redzēt, ka mainīgajā pamācībā ID, kuram bija daudz decimālzīmju, nodotais skaitlis tika ierobežots līdz 2 zīmēm aiz komata, jo tika lietots skaits: 2 filtri.
Valūtas filtrs AngularJS
Šis filtrs formatē valūtas filtru uz skaitli.
Pieņemsim, ja vēlaties parādīt skaitli ar tādu valūtu kā $, tad šo filtru var izmantot.
Zemāk sniegtajā piemērā mēs izmantosim kontrolieri, lai nosūtītu numuru uz skatu, izmantojot darbības jomas objektu. Pēc tam mēs izmantosim filtru skatā, lai lietotu pašreizējo filtru.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Koda skaidrojums:
- Šeit mēs nododam numuru dalībnieka mainīgajā, ko sauc par tutorialprice, un pievienojam to darbības objekta objektam.
- Mēs izmantojam locekļa mainīgā apmācības cenu un ievietojam filtra simbolu (|) kopā ar valūtas filtru. Ievērojiet, ka lietotā valūta ir atkarīga no mašīnai piemērotajiem valodas iestatījumiem.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var redzēt, ka valūtas simbols ir pievienots skaitlim, kas tika nodots mainīgā apmācības cenā.
- Mūsu gadījumā, tā kā valodas iestatījumi ir angļu (Amerikas Savienotās Valstis), simbols $ tiek ievietots kā valūta.
JSON filtrs leņķiskajāJS
Šis filtrs formatē JSON līdzīgu ievadi un pielieto AngularJS JSON filtru, lai sniegtu izvadi JSON.
Zemāk sniegtajā piemērā mēs izmantosim kontrolleri, lai nosūtītu JSON tipa objektu skatam, izmantojot darbības objekta. Pēc tam skatā izmantosim filtru, lai lietotu JSON filtru.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Koda skaidrojums:
- Šeit mēs nododam numuru dalībnieka mainīgajā, ko sauc par "apmācību", un pievienojam to darbības objekta objektam. Šis dalībnieka mainīgais satur JSON tipa virkni Pamācības ID: 12 un Pamācības nosaukums: "Leņķa".
- Mēs izmantojam locekļu mainīgo apmācību un ievietojam filtra simbolu (|) kopā ar JSON filtru.
Ja kods ir veiksmīgi izpildīts, palaižot kodu pārlūkprogrammā, tiks parādīta šāda izeja.
Izeja:
No izejas
- Var redzēt, ka JSON kā virkne ir parsēta un pārlūkprogrammā tiek parādīts pareizs JSON objekts.
Kopsavilkums:
- Filtri tiek izmantoti, lai mainītu veidu, kā produkcija tiek parādīta lietotājam.
- Angular nodrošina iebūvētus filtrus, piemēram, mazos un lielos, lai virkņu izvadi mainītu attiecīgi uz mazajiem un lielajiem.
- Ir arī noteikums mainīt numuru parādīšanas veidu, izmantojot skaitļu filtru, norādot skaitļos parādāmo decimālzīmju skaitu.
- Var izmantot arī valūtas filtru, lai jebkuram skaitlim pievienotu valūtas simbolu.
- Ja ir nepieciešama īpaša json izeja, leņķiskais nodrošina arī JSON filtru, lai filtrētu jebkuru JSON līdzīgu virkni JSON formātā.