Príklad filtra AngularJS: malé písmená, veľké písmená a JSON

Obsah:

Anonim

Čo je filter v AngularJS?

Filter angularjs pomáha formátovať hodnotu výrazu pre zobrazenie užívateľovi bez zmeny pôvodného formátu. Napríklad ak chcete, aby bol váš reťazec malými alebo veľkými písmenami, môžete to urobiť pomocou filtrov. K dispozícii sú vstavané filtre, ako napríklad „malé písmená“, „veľké písmená“, ktoré dokážu zodpovedajúcim spôsobom načítať výstup malých a veľkých písmen.

Podobne môžete pre čísla použiť aj iné filtre.

Počas tohto tutoriálu uvidíme rôzne štandardné zabudované filtre dostupné v Angular.

V tomto návode sa naučíte

  • Filter malých písmen v AngularJS
  • Filter veľkých písmen v AngularJS
  • Filtrovanie čísel v AngularJS
  • Mena Filter v AngularJS
  • Filter JSON v AngularJS

Filter malých písmen v AngularJS

Tento filter prijíma výstup z reťazca, formátuje reťazec a zobrazuje všetky znaky v reťazci ako malé písmená.

Pozrime sa na príklad filtrov AngularJS s možnosťou AngularJS tolowercase.

V nasledujúcom príklade použijeme radič na odoslanie reťazca do pohľadu cez objekt rozsahu. Potom v zobrazení použijeme filter na prevedenie reťazca na malé písmená.

Event Registration

Guru99 Global Event


Tutorial Name : 

This tutorial is

Vysvetlenie kódu:

  1. Tu odovzdávame reťazec, ktorý je kombináciou malých a veľkých písmen v členskej premennej s názvom „tutorialName“ a jeho pripojenie k objektu rozsahu. Hodnota odovzdávaného reťazca je „AngularJS“.
  2. Používame členskú premennú "tutorialName" a vkladáme symbol filtra (|), čo znamená, že výstup je potrebné upraviť pomocou filtra. Potom pomocou kľúčového slova s ​​malými písmenami povieme, že na výstup celého reťazca s malými písmenami použijeme zabudovaný filter.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je vidieť, že bol vykonaný reťazec „AngularJS“, ktorý bol odovzdaný v premennej tutorialName, ktorá bola kombináciou malých a veľkých písmen.
  • Po vykonaní je konečný výstup malými písmenami, ako je uvedené vyššie.

Filter veľkých písmen v AngularJS

Tento filter je podobný ako filter malých písmen; rozdiel je v tom, že prevezme výstup z reťazca, naformátuje reťazec a zobrazí všetky znaky v reťazci ako veľké písmená.

Pozrime sa na príklad písania veľkých písmen filtra AngularJS s možnosťou malých písmen.

V nasledujúcom príklade písania veľkých písmen AngularJS použijeme radič na odoslanie reťazca do pohľadu cez objekt rozsahu. Potom v zobrazení použijeme filter na prevedenie reťazca na veľké písmená.

Event Registration

Guru99 Global Event


Tutorial Name : 

This tutorial is {{tutorialName | uppercase}}

Vysvetlenie kódu:

  1. Tu odovzdávame reťazec, ktorý je kombináciou malých a veľkých písmen „Angular JS“ v členskej premennej s názvom „tutorialName“ a jeho pripojenie k objektu rozsahu.
  2. Používame členskú premennú "tutorialName" a vkladáme symbol filtra (|), čo znamená, že výstup je potrebné upraviť pomocou filtra. Potom pomocou kľúčového slova pre veľké písmená povieme, že na výstup celého reťazca vo veľkých písmenách použijeme zabudovaný filter.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je vidieť, že reťazec, ktorý bol odovzdaný v premennej tutorialName, ktorá bola kombináciou malých a veľkých písmen, bol vygenerovaný na všetky veľké písmená.

Filtrovanie čísel v AngularJS

Tento filter formátuje číslo a pri čísle môže použiť obmedzenie desatinných miest.

Pozrime sa na príklad filtrov AngularJS s možnosťou počtu.

V príklade nižšie

Chceli sme predviesť, ako môžeme pomocou číselného filtra formátovať číslo tak, aby sa zobrazovalo s obmedzením na dve desatinné miesta.

Na odoslanie čísla na zobrazenie prostredníctvom objektu rozsahu použijeme kontrolór. Potom v zobrazení použijeme filter na použitie filtra čísel.

Event Registration

Guru99 Global Event


This tutorialID is {{tutorialID | number:2}}

Vysvetlenie kódu:

  1. Tu odovzdávame číslo s väčším počtom desatinných miest v členskej premennej s názvom tutorialID a pripájame ho k objektu rozsahu.
  2. Používame členskú premennú tutorialID a spolu s číselným filtrom dávame symbol filtra (|). Teraz v počte: 2, dva znamenajú, že filter by mal obmedziť počet desatinných miest na 2.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je vidieť, že počet, ktorý bol odovzdaný v premennej tutorialID, ktorá mala veľký počet desatinných miest, bol obmedzený na 2 desatinné miesta kvôli použitému filtru počet: 2.

Mena Filter v AngularJS

Tento filter naformátuje filter meny na číslo.

Predpokladajme, že ak chcete zobraziť číslo s menou, napríklad $, môžete použiť tento filter.

V nasledujúcom príklade použijeme radič na odoslanie čísla do zobrazenia cez objekt rozsahu. Potom v zobrazení použijeme filter na použitie aktuálneho filtra.

Event Registration

Guru99 Global Event


This tutorial Price is {{tutorialprice | currency}}

Vysvetlenie kódu:

  1. Tu odovzdávame číslo v členskej premennej s názvom tutorialprice a pripájame ho k objektu rozsahu.
  2. Používame členskú premennú tutorialprice a spolu s menovým filtrom dávame symbol filtra (|). Mena, ktorá sa použije, závisí od jazykových nastavení použitých v prístroji.

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je vidieť, že symbol meny bol pripojený k číslu, ktoré bolo odovzdané v premennej tutorialprice.
  • Pretože v našom prípade sú jazykové nastavenia angličtina (USA), ako mena sa vloží symbol $.

Filter JSON v AngularJS

Tento filter naformátuje vstup ako JSON a na poskytnutie výstupu v JSON použije filter JSON AngularJS.

V nasledujúcom príklade použijeme radič na odoslanie objektu typu JSON do pohľadu cez objekt rozsahu. Potom v zobrazení použijeme filter na použitie filtra JSON.

Event Registration

Guru99 Global Event


This tutorial is {{tutorial | json}}

Vysvetlenie kódu:

  1. Tu odovzdávame číslo v členskej premennej s názvom „tutorial“ a pripájame ho k objektu rozsahu. Táto členská premenná obsahuje reťazec typu JSON Tutorial ID: 12 a TutorialName: "Angular".
  2. Používame tutoriál premennej člena a spolu s filtrom JSON vkladáme symbol filtra (|).

Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup.

Výkon:

Z výstupu

  • Je vidieť, že JSON ako reťazec je analyzovaný a zobrazuje správny objekt JSON v prehliadači.

Zhrnutie:

  • Filtre sa používajú na zmenu spôsobu, akým sa výstup zobrazuje používateľovi.
  • Angular poskytuje vstavané filtre, ako sú filtre malých a veľkých písmen, ktoré menia výstup reťazcov na malé a veľké písmená.
  • Existuje tiež ustanovenie na zmenu spôsobu zobrazovania čísel pomocou filtra čísel zadaním počtu desatinných miest, ktoré sa majú v čísle zobraziť.
  • Pomocou filtra meny môžete tiež pridať symbol meny k ľubovoľnému číslu.
  • Ak existuje požiadavka na špecifický výstup json, angular tiež poskytuje filter JSON na filtrovanie ľubovoľného reťazca vo formáte JSON do formátu JSON.