Příklad filtru AngularJS: malá písmena, velká písmena a JSON

Obsah:

Anonim

Co je filtr v AngularJS?

Filtr angularjs pomáhá formátovat hodnotu výrazu pro zobrazení uživateli bez změny původního formátu. Například pokud chcete, aby váš řetězec byl malými nebo velkými písmeny, můžete to udělat pomocí filtrů. K dispozici jsou vestavěné filtry, například „malá písmena“, „velká písmena“, která mohou odpovídajícím způsobem načíst výstup malých a velkých písmen.

Podobně pro čísla můžete použít i jiné filtry.

Během tohoto tutoriálu uvidíme různé standardní vestavěné filtry dostupné v Angular.

V tomto výukovém programu se naučíte

  • Filtr malých písmen v AngularJS
  • Filtr velkých písmen v AngularJS
  • Filtr čísel v AngularJS
  • Filtr měn v AngularJS
  • Filtr JSON v AngularJS

Filtr malých písmen v AngularJS

Tento filtr přebírá výstup řetězce a formátuje řetězec a zobrazuje všechny znaky v řetězci jako malá písmena.

Podívejme se na příklad filtrů AngularJS s možností AngularJS tolowercase.

V níže uvedeném příkladu použijeme řadič k odeslání řetězce do pohledu prostřednictvím objektu oboru. Potom použijeme filtr v pohledu k převedení řetězce na malá písmena.

Event Registration

Guru99 Global Event


Tutorial Name : 

This tutorial is {{tutorialName | lowercase}}

Vysvětlení kódu:

  1. Zde předáváme řetězec, který je kombinací malých a velkých znaků v členské proměnné s názvem „tutorialName“ a jeho připojení k objektu oboru. Hodnota předávaného řetězce je „AngularJS“.
  2. Používáme členskou proměnnou "tutorialName" a vkládáme symbol filtru (|), což znamená, že výstup je třeba upravit pomocí filtru. Potom použijeme klíčové slovo Malá písmena, abychom řekli, že použijeme vestavěný filtr k výstupu celého řetězce malými písmeny.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je vidět, že byl proveden řetězec „AngularJS“, který byl předán v proměnné tutorialName, což byla kombinace malých a velkých znaků.
  • Po provedení je konečný výstup malými písmeny, jak je uvedeno výše.

Filtr velkých písmen v AngularJS

Tento filtr je podobný malému filtru; rozdíl je v tom, že převezme řetězcový výstup a zformátuje řetězec a zobrazí všechny znaky v řetězci jako velká písmena.

Podívejme se na příklad filtrování velkých písmen AngularJS s možností malých písmen.

V níže uvedeném příkladu AngularJS použití velkých písmen použijeme řadič k odeslání řetězce do pohledu prostřednictvím objektu oboru. Potom použijeme filtr v pohledu k převedení řetězce na velká písmena.

Event Registration

Guru99 Global Event


Tutorial Name : 

This tutorial is {{tutorialName | uppercase}}

Vysvětlení kódu:

  1. Zde předáváme řetězec, který je kombinací malých a velkých znaků „Angular JS“ v členské proměnné s názvem „tutorialName“ a připojujeme jej k objektu oboru.
  2. Používáme členskou proměnnou "tutorialName" a vkládáme symbol filtru (|), což znamená, že výstup je třeba upravit pomocí filtru. Potom použijeme klíčové slovo uppercase, abychom řekli, že použijeme vestavěný filtr k výstupu celého řetězce velkými písmeny.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je vidět, že řetězec, který byl předán v proměnné tutorialName, což byla kombinace malých a velkých znaků, byl vypsán ve všech velkých písmech.

Filtr čísel v AngularJS

Tento filtr formátuje číslo a může použít omezení na desetinná místa čísla.

Podívejme se na příklad filtrů AngularJS s možností čísla.

V níže uvedeném příkladu

Chtěli jsme předvést, jak můžeme pomocí číselného filtru formátovat číslo tak, aby se zobrazovalo s omezením na 2 desetinná místa.

Pomocí kontroleru odešleme číslo na pohled přes objekt oboru. Potom použijeme filtr v zobrazení k použití filtru čísel.

Event Registration

Guru99 Global Event


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

Vysvětlení kódu:

  1. Tady předáváme číslo s větším počtem desetinných míst v členské proměnné s názvem tutorialID a připojujeme jej k objektu oboru.
  2. Používáme členskou proměnnou tutorialID a vkládáme symbol filtru (|) spolu s filtrem čísel. Nyní v number: 2, dva označuje, že filtr by měl omezit počet desetinných míst na 2.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je vidět, že číslo, které bylo předáno v proměnné tutorialID, která měla velký počet desetinných míst, bylo omezeno na 2 desetinná místa kvůli použitému filtru číslo: 2.

Filtr měn v AngularJS

Tento filtr formátuje měnový filtr na číslo.

Předpokládejme, že pokud chcete zobrazit číslo s měnou, například $, můžete použít tento filtr.

V níže uvedeném příkladu použijeme řadič k odeslání čísla do pohledu prostřednictvím objektu oboru. Poté v zobrazení použijeme filtr k použití aktuálního filtru.

Event Registration

Guru99 Global Event


This tutorial Price is {{tutorialprice | currency}}

Vysvětlení kódu:

  1. Tady předáváme číslo v členské proměnné s názvem tutorialprice a připojujeme ho k objektu oboru.
  2. Používáme členskou proměnnou tutorialprice a vkládáme symbol filtru (|) spolu s filtrem měny. Měna, která se použije, závisí na jazykovém nastavení použitém pro zařízení.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je vidět, že symbol měny byl přidán k číslu, které bylo předáno v proměnné tutorialprice.
  • V našem případě, protože jazyková nastavení jsou angličtina (USA), je jako měna vložen symbol $.

Filtr JSON v AngularJS

Tento filtr formátuje vstup jako JSON a použije filtr JSON AngularJS, aby poskytl výstup v JSON.

V níže uvedeném příkladu použijeme řadič k odeslání objektu typu JSON do zobrazení prostřednictvím objektu oboru. Poté v zobrazení použijeme filtr k použití filtru JSON.

Event Registration

Guru99 Global Event


This tutorial is {{tutorial | json}}

Vysvětlení kódu:

  1. Tady předáváme číslo v členské proměnné s názvem „tutorial“ a připojujeme jej k objektu oboru. Tato členská proměnná obsahuje řetězec typu JSON s ID tutoriálu: 12 a TutorialName: "Úhlová".
  2. Používáme tutoriál proměnné členů a vkládáme symbol filtru (|) spolu s filtrem JSON.

Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Z výstupu

  • Je vidět, že JSON jako řetězec je analyzován a zobrazen správný objekt JSON v prohlížeči.

Souhrn:

  • Filtry se používají ke změně způsobu, jakým se výstup zobrazuje uživateli.
  • Úhlové poskytuje integrované filtry, jako jsou filtry malých a velkých písmen, které mění výstup řetězců na malá a velká písmena.
  • Existuje také ustanovení pro změnu způsobu zobrazování čísel pomocí filtru čísel zadáním počtu desetinných míst, která se mají v čísle zobrazit.
  • Pomocí měnového filtru lze také přidat symbol měny k libovolnému číslu.
  • Pokud existuje požadavek na specifický výstup JSON, angular také poskytuje filtr JSON pro filtrování libovolného řetězce typu JSON do formátu JSON.