Kas yra filtras „AngularJS“?
„ AngularJS “ filtras padeda suformatuoti išraiškos vertę, kuri bus rodoma vartotojui nekeičiant pradinio formato. Pvz., Jei norite, kad eilutė būtų mažoji arba didžioji, galite tai padaryti naudodami filtrus. Yra įmontuoti filtrai, pvz., „Mažosios raidės“, „didžiosios raidės“, kurie gali atitinkamai gauti mažųjų ir didžiųjų raidžių išvestis.
Panašiai skaičiams galite naudoti kitus filtrus.
Šios pamokos metu pamatysime skirtingus standartinius įmontuotus filtrus, esančius „Angular“.
Šioje pamokoje sužinosite
- Mažųjų filtrų kampinis JS
- Didžiųjų raidžių filtras kampiniu JS
- Skaičių filtras kampiniu JS
- Valiutos filtras kampiniu JS
- JSON filtras kampiniu JS
Mažųjų filtrų kampinis JS
Šis filtras įgyja eilutės išvestį ir suformatuoja eilutę ir visus eilutės simbolius rodo kaip mažąsias.
Pažvelkime į „AngularJS“ filtrų pavyzdį su parinktimi „AngularJS tolowercase“.
Žemiau pateiktame pavyzdyje mes naudosime valdiklį, kad siųstume eilutę į rodinį per srities objektą. Tada rodinyje naudosime filtrą, kad eilutę paverstume mažosiomis.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Kodo paaiškinimas:
- Čia mes perduodame eilutę, kuri yra mažųjų ir didžiųjų simbolių derinys nario kintamajame, vadinamame „tutorialName“, ir pridedame jį prie srities objekto. Perduodamos eilutės vertė yra „AngularJS“.
- Mes naudojame nario kintamąjį „tutorialName“ ir dedame filtro simbolį (|), o tai reiškia, kad išvestį reikia modifikuoti naudojant filtrą. Tada mes naudojame mažųjų raidžių raktinį žodį, kad galėtume naudoti integruotą filtrą, kad išvestumėte visą eilutę mažosiomis raidėmis.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Galima pastebėti, kad buvo atlikta eilutė „AngularJS“, kuri buvo perduota kintamajame tutorialName, kuris buvo mažųjų ir didžiųjų raidžių derinys.
- Po vykdymo galutinis rezultatas yra mažosiomis raidėmis, kaip parodyta aukščiau.
Didžiųjų raidžių filtras kampiniu JS
Šis filtras yra panašus į mažųjų raidžių filtrą; skirtumas yra tas, kad įgauna eilutės išvestį ir suformatuoja eilutę ir visus eilutės simbolius rodo kaip didžiąsias.
Pažvelkime į didžiųjų raidžių filtro AngularJS pavyzdį su mažųjų parinktimi.
Žemiau pateiktame „AngularJS“ didžiųjų raidžių pavyzdyje mes naudosime valdiklį, kad siųstume eilutę į rodinį per srities objektą. Tada rodinyje naudosime filtrą, kad eilutę paverstume didžiosiomis.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Kodo paaiškinimas:
- Čia mes perduodame eilutę, kuri yra mažųjų ir didžiųjų raidžių „Angular JS“ derinys nario kintamajame, vadinamame „tutorialName“, ir pridedame ją prie srities objekto.
- Mes naudojame nario kintamąjį „tutorialName“ ir dedame filtro simbolį (|), o tai reiškia, kad išvestį reikia modifikuoti naudojant filtrą. Tada mes naudojame didžiųjų raidžių raktinį žodį, kad galėtume naudoti integruotą filtrą, kad išvestumėte visą eilutę didžiosiomis raidėmis.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Galima pastebėti, kad eilutė, kuri buvo perduota kintamajame tutorialName, kuris buvo mažųjų ir didžiųjų raidžių derinys, buvo išrašyta visomis didžiosiomis raidėmis.
Skaičių filtras kampiniu JS
Šis filtras suformatuoja skaičių ir gali taikyti skaičiaus dešimtainių taškų ribą.
Pažvelkime į „AngularJS“ filtrų su skaičiaus parinktimi pavyzdį.
Toliau pateiktame pavyzdyje
Mes norėjome parodyti, kaip mes galime naudoti skaičių filtrą, kad suformatuotume rodomą skaičių su 2 dešimtųjų tikslumu.
Mes naudosime valdiklį, kad nusiųstume numerį rodiniui per srities objektą. Tada rodinyje naudosime filtrą, kad pritaikytume skaičių filtrą.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Kodo paaiškinimas:
- Čia mes perduodame skaičių su didesniu skaičiumi dešimtainių skaičių kintamajame, vadinamame tutorialID, ir pridedame jį prie srities objekto.
- Mes naudojame nario kintamąjį tutorialID ir dedame filtro simbolį (|) kartu su skaičių filtru. Dabar skaičius: 2, du rodo, kad filtras turėtų apriboti skaičių po kablelio skaičių iki 2.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Galima pastebėti, kad skaičius, kuris buvo perduotas kintamajame „tutorialID“, kuriame buvo daug dešimtųjų, buvo apribotas iki 2 skaitmenų po kablelio dėl skaičiaus: 2 filtrai, kurie buvo pritaikyti.
Valiutos filtras kampiniu JS
Šis filtras suformatuoja valiutos filtrą į skaičių.
Tarkime, jei norite rodyti skaičių su tokia valiuta kaip $, tuomet šį filtrą galima naudoti.
Žemiau pateiktame pavyzdyje mes naudosime valdiklį, kad nusiųstume numerį rodiniui per srities objektą. Tada rodinyje naudosime filtrą, kad pritaikytume dabartinį filtrą.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Kodo paaiškinimas:
- Čia mes perduodame skaičių nario kintamajame, vadinamame „tutorialprice“, ir pridedame jį prie srities objekto.
- Mes naudojame nario kintamojo mokymo kainą ir kartu su valiutos filtru dedame filtro simbolį (|). Atminkite, kad ta valiuta, kuri taikoma, priklauso nuo mašinai taikomų kalbos nustatymų.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Matyti, kad valiutos simbolis buvo pridėtas prie skaičiaus, kuris buvo perduotas kintamajame „tutorialprice“.
- Mūsų atveju, kadangi kalbos nustatymai yra anglų (JAV), simbolis $ įterpiamas kaip valiuta.
JSON filtras kampiniu JS
Šis filtras suformatuoja panašų į JSON įvestį ir taiko „AngularJS“ JSON filtrą, kad išvestis būtų JSON.
Žemiau pateiktame pavyzdyje mes naudosime valdiklį, norėdami išsiųsti JSON tipo objektą į rodinį per srities objektą. Tada vaizde naudosime filtrą, kad pritaikytume JSON filtrą.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Kodo paaiškinimas:
- Čia mes perduodame skaičių nario kintamajame, vadinamame „pamoka“, ir pridedame jį prie srities objekto. Šiame kintamajame yra JSON tipo „Tutorial ID: 12“ eilutė ir „TutorialName“: „Kampinis“.
- Mes naudojame nario kintamojo mokymo programą ir dedame filtro simbolį (|) kartu su JSON filtru.
Jei kodas sėkmingai įvykdytas, paleidus kodą naršyklėje bus rodoma ši išvestis.
Išvestis:
Iš išvesties
- Galima pastebėti, kad JSON kaip eilutė yra analizuojama ir naršyklėje rodomas tinkamas JSON objektas.
Santrauka:
- Filtrai naudojami norint pakeisti išvesties rodymą vartotojui.
- „Angular“ suteikia įmontuotus filtrus, tokius kaip mažųjų ir didžiųjų raidžių filtrai, kad stygų išvestis būtų atitinkamai pakeista į mažąsias ir didžiąsias.
- Taip pat yra nuostata, kaip pakeisti skaičių rodymo būdą naudojant skaičių filtrą, nurodant dešimtainių taškų skaičių, kuris turi būti rodomas skaičiuje.
- Taip pat galima naudoti valiutos filtrą, norint pridėti valiutos simbolį prie bet kurio skaičiaus.
- Jei reikia turėti specifinę „Json“ išvestį, kampinis taip pat pateikia JSON filtrą, skirtą bet kokioms JSON panašioms eilutėms filtruoti į JSON formatą.