Filtry AngularJS & Vlastní filtr AngularJS s příkladem

Od: James Hartman James Hartman
Hours aktualizováno

⚡ Chytré shrnutí

Filtr v AngularJS formátuje hodnotu výrazu pro zobrazení bez změny podkladových dat. Vestavěné filtry zahrnují velká a malá písmena, čísla, měny a JSON, zatímco vlastní filtr zpracovává jakékoli pravidlo formátování, které framework již neposkytuje.

  • 🧾 Základní princip: Filtr transformuje pouze to, co se zobrazuje v pohledu; hodnota uchovaná v objektu scope se nikdy nemění.
  • ➖ Syntaxe svislého směru: Svislá čára odděluje výraz od názvu filtru a dvojtečka mu předává argument.
  • 🔤 Filtry pouzder: Malá a velká písmena převádějí řetězec pro zobrazení a v AngularJS neexistuje žádný filtr pro velká písmena.
  • 🔢 Číslo a měna: Parametr number omezuje počet desetinných míst, zatímco parametr currency přidává před hodnotu symbol řízený národním prostředím.
  • 🛠️ Vlastní filtry: Registrace továrny, která vrací funkci, vytvoří opakovaně použitelný filtr dostupný v celém modulu.
  • ⚡ Na čistotě záleží: Filtr musí vracet stejný výstup pro stejný vstup, protože AngularJS ukládá výsledky do mezipaměti a přeskakuje opětovné spuštění čistých filtrů.
Přečíst více

Filtry AngularJS a vlastní filtr

Co je filtr v AngularJS?

A Filtr v AngularJS pomáhá formátovat hodnotu výrazu pro zobrazení uživateli bez změny původní hodnoty. Pokud například chcete řetězec zobrazený malými nebo velkými písmeny, můžete to udělat pomocí filtrů. Vestavěné filtry, jako například „malá písmena“ a „velká písmena“, vracejí řetězec v požadovaných velkých a další filtry existují pro čísla, měny a JSON.

⚠️ Poznámka k verzi: Podpora AngularJS (větve 1.x) skončila 31. prosince 2021 a neobdrží žádné další bezpečnostní záplaty. Všechny níže uvedené informace zůstávají platné pro údržbu stávajících aplikací AngularJS; v moderním Angularu stejnou roli plní roura.

Filtry se v zobrazení používají pomocí svislé čáry. Než se na každý z nich podíváme, je užitečné vědět, proč byste si měli psát vlastní.

Filtr malých písmen v AngularJS

Tento filtr bere řetězec a zobrazuje všechny jeho znaky malými písmeny.

Níže uvedený kontroler odesílá řetězec do zobrazení prostřednictvím objektu scope a filtr jej převádí na malá písmena.

Filtr malých písmen v AngularJS

<!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 Vysvětlení

  1. Řetězec „Angular JS“ se smíšenými malými a velkými písmeny je umístěn do členské proměnné s názvem tutorialName na objektu rozsahu.
  2. Symbol filtru (|) označuje výstup pro transformaci a lowercase Klíčové slovo aplikuje vestavěný filtr, který vykreslí celý řetězec malými písmeny.

⚠️ Opravy byly provedeny u každého záznamu. Všech šest původních příkladů sdílelo tři vady. chrset="UTF 8" není platný atribut nebo kódování a nyní je charset="UTF-8". angular-route.js naložený před angular.min.js, která vyvolá chybu modulu a nikdy nebyla použita – byla odstraněna, stejně jako nepoužívaná reference jQuery. Text také tvrdil, že hodnota byla „AngularJS“, zatímco kódová sada byla „Angular JS“; text nyní odpovídá.

Výstup:

Filtr malých písmen v AngularJS

Řetězec s různými velikostmi písmen se vykreslí celý malými písmeny. Opačná transformace funguje stejným způsobem.

Filtr velkých písmen v AngularJS

Tento filtr je protějškem filtru malých písmen a zobrazuje všechny znaky velkými písmeny.

Níže uvedený kontroler odesílá řetězec do zobrazení prostřednictvím objektu scope a filtr jej převádí na velká písmena.

Filtr velkých písmen v AngularJS

<!-- 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 Vysvětlení

  1. Řetězec „Angular JS“ se smíšenými malými a velkými písmeny je umístěn v tutorialName a připojený k objektu rozsahu.
  2. Za symbolem filtru (|) následuje uppercase klíčové slovo, takže vestavěný filtr vykreslí celý řetězec velkými písmeny.

⚠️ Oprava: Původní text tuto sekci uváděl jako „příklad filtru velkých písmen v AngularJS s možností malých písmen“, což je dvakrát špatně. Tato sekce demonstruje filtr velkých písmen a AngularJS žádný filtr velkých písmen nemá – psaní velkých písmen pouze prvním písmenem vyžaduje vlastní filtr, který se v dalších sekcích ukazuje, jak jej vytvořit.

Výstup:

Filtr velkých písmen v AngularJS

Filtry velikosti písmen nepřijímají žádné argumenty. Následující filtr ukazuje, jak dvojtečka předává parametr filtru.

Filtr čísel v AngularJS

Tento filtr formátuje číslo a může omezit počet zobrazených desetinných míst.

Níže uvedený příklad používá číselný filtr k zobrazení hodnoty omezené na dvě desetinná místa. Kontroler odešle číslo do zobrazení prostřednictvím objektu scope a filtr se v zobrazení použije.

Filtr čísel v AngularJS

<!-- 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 Vysvětlení

  1. Číslo s mnoha desetinnými místy je umístěno v členské proměnné s názvem tutorialID a připojený k objektu rozsahu.
  2. Za symbolem filtru (|) následuje number:2Dvojtečka předává argument a číslice 2 nastavuje dvě desetinná místa. Hodnota se pro zobrazení zaokrouhlí, takže 3.565656 se zobrazí jako 3.57, zatímco rozsah si ponechá celé číslo.

Výstup:

Filtr čísel v AngularJS

Formátování prostého čísla často nestačí, pokud hodnota představuje peníze, což je to, co zpracovává další filtr.

Nenechte ujít:

Měnový filtr v AngularJS

Tento filtr formátuje číslo jako hodnotu měny a před něj přidává symbol měny, například $.

V níže uvedeném příkladu kontroler odešle číslo do zobrazení prostřednictvím objektu scope a v zobrazení se použije filtr měny.

Měnový filtr v AngularJS

<!-- 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 Vysvětlení

  1. Číslo je umístěno do členské proměnné s názvem tutorialprice a připojený k objektu rozsahu.
  2. Za symbolem filtru (|) následuje currency filtr.

⚠️ Oprava: Původní text tvrdil, že měna „závisí na nastavení jazyka použitém v počítači“. Nezávisí to. AngularJS používá lokalizaci dodávanou s knihovnou, standardně en-US, takže symbol je $ bez ohledu na operační systém. Načtěte odpovídající kód. angular-locale_*.js soubor nebo předejte symbol přímo: {{tutorialprice | currency:"£"}}.

Výstup:

Měnový filtr v AngularJS

Řetězce a čísla jsou jednoduché hodnoty. Poslední vestavěný filtr pracuje s celými objekty.

Filtr JSON v AngularJS

Tento filtr převede objekt do formátovaného JSON řetězec, který je užitečný pro kontrolu dat rozsahu během vývoje.

V níže uvedeném příkladu odešle kontroler objekt do zobrazení prostřednictvím objektu scope a filtr JSON se použije v zobrazení.

Filtr JSON v AngularJS

<!-- 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 Vysvětlení

  1. Objekt držící TutorialID: 12 a tutorialName: "Angular" je umístěn v členské proměnné s názvem tutorial a připojený k objektu rozsahu.
  2. Za symbolem filtru (|) následuje json filtr, který serializuje objekt do odsazeného textu JSON.

⚠️ Oprava: Původní text popsal tuto hodnotu jako „číslo“ a zároveň jako „řetězec typu JSON“. Není to ani jedno, ani druhé. Je to JavaObjekt skriptu a filtr JSON jej převede na řetězec JSON pro zobrazení.

Výstup:

Filtr JSON v AngularJS

Těchto pět filtrů pokrývá běžné případy. Pokud žádný z nich negeneruje požadovaný výstup, napíšete si vlastní.

Vlastní filtr AngularJS

Někdy vestavěné filtry v AngularJS nemohou splňovat požadavky na formátování výstupu. V takovém případě lze vytvořit vlastní filtr AngularJS, který vrátí výstup požadovaným způsobem.

Vlastní filtr je registrován v modulu a poté se chová přesně jako vestavěný filtr. Následující části nejprve pokrývají standardní filtry, protože vlastní filtr používá stejnou syntaxi roury, a poté ukazují, jak vlastní filtr vytvořit.

Jak vytvořit vlastní filtr v AngularJS

V níže uvedeném příkladu přechází řetězec z kontrolor do pohledu přes objekt scope, ale neměl by se zobrazovat tak, jak je. Vlastní filtr v AngularJS připojí další řetězec a zobrazí hotový výsledek.

Vytvořte vlastní filtr v AngularJS

<!-- 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 Vysvětlení

  1. Řetězec „Angular“ je umístěn do členské proměnné s názvem tutorial a připojený k objektu rozsahu.
  2. AngularJS poskytuje filter Metoda registrace použitá k vytvoření vlastního filtru. Je jí přidělen název „Demofiltr“ a na tento název se zobrazení odkazuje.
  3. Toto je standardní tvar vlastního filtru: registrovaná funkce je továrna vrací funkci, která provádí práci. Tato funkce přijímá filtrovanou hodnotu jako svůj první parametr a vrací výsledek – zde vstup s připojeným textem „Tutorial“.
  4. Filtr se v zobrazení použije s použitím stejné syntaxe svisle jako jakýkoli vestavěný filtr.

👍 Tip: Názvy filtrů se obvykle píší malými písmeny nebo velbloudími písmeny. „Demofilter“ funguje, ale název jako například appendTutorial lépe se čte a vyhýbá se kolizím s vestavěným názvem.

Výstup:

Vytvořte vlastní filtr v AngularJS

K řetězci předanému v tutorial proměnná. Tento filtr vždy připojuje stejný text, který je v následující části konfigurovatelný.

Jak předat argumenty vlastnímu filtru

Výše uvedený filtr pevně kóduje text, který připojuje, takže může dělat pouze jednu věc. Vestavěné filtry, jako například number:2 přijmout argument za dvojtečkou a vlastní filtr to také dokáže: každý parametr za prvním se v zobrazení mapuje na argument oddělený dvojtečkou.

Zahrnují tři kroky: přidání parametrů za input Ve vrácené funkci zadejte výchozí hodnotu pro cokoli volitelného, ​​aby filtr fungoval i při vynechání argumentu, a poté předejte argumenty v zobrazení oddělené dvojtečkami.

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;
  };
});

Zobrazení pak vypadá následovně, kde se „Tutorial“ stává suffix a pomlčka se stane separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

Dva detaily lze snadno přehlédnout. Argumenty jsou výrazy AngularJS, takže doslovný řetězec musí být v uvozovkách, zatímco slovo bez uvozovek se čte jako vlastnost rozsahu platnosti. Filtry se také řetězí, přičemž každý z nich přijímá výstup předchozího: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Varování: Udržujte filtr čistý – stejný výstup pro stejný vstup, žádné vnější změny. AngularJS ukládá čistý filtr do mezipaměti a znovu ho spouští pouze při změně vstupu. Filtr, který čte hodiny nebo mutuje službu, musí být označen. $stateful, což zakáže ukládání do mezipaměti a spouští filtr v každém cyklu digest, což je častá příčina pomalého načítání stránek.

Filtry nejsou omezeny na šablony. Stejný filtr lze volat z JavaSkript, jak je znázorněno dále.

Jak používat filtry v kontroleru se službou $filter

Použití filtru v zobrazení je běžný případ, ale transformovaná hodnota je někdy potřeba uvnitř kontroleru, například před odesláním dat na server. AngularJS zpřístupňuje každý registrovaný filtr, vestavěný i vlastní, prostřednictvím $filter služba. Vložte ji, zavolejte ji s názvem filtru pro načtení funkce filtru a poté ji spusťte s hodnotou a případnými argumenty.

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");
}]);

Existuje i kratší forma: vložení názvu filtru následovaného Filter, Jako uppercaseFilter, poskytuje funkci filtru přímo a lze ji okamžitě volat. Oba tvary se převádějí na stejnou funkci, takže volba je stylistická.

Opakovaně se objevují dvě použití. Prvním je příprava datové části: datum se obvykle musí dostat do API v pevném vzoru a $filter('date')(value, 'yyyy-MM-dd') vytvoří ji bez dotčení hodnoty vázané na formulář. Druhým je zúžení kolekce jednou v kontroleru, spíše než ponechání orderBy v ng-opakovat výraz, kde se znovu spustí při každém dagestu.

Filtry vložené tímto způsobem jsou stále registrovány v modulu, takže je nutné deklarovat vlastní filtr s názvem app.filter než se jakýkoli správce zeptá $filter pro to. Jinak AngularJS vyvolá chybu neznámého poskytovatele.

Volání filtru JavaSkript se od šablony liší v jednom důležitém ohledu: výsledek se vypočítá jednou a uloží do rozsahu, nikoli se přepočítává při každém digestování. Díky tomu je rychlejší volbou pro hodnotu, která se mění jen zřídka, a špatnou volbou pro hodnotu, která se musí měnit. tracvstup uživatele k.

Nejčastější dotazy

Ne. AngularJS podporuje pouze malá a velká písmena. Velká první písmena každého slova vyžaduje vlastní filtr, který rozdělí řetězec a znovu ho sestaví, nebo pravidlo CSS pro transformaci textu, pokud je změna čistě vizuální.

Filtr je registrován na jiném modulu než na tom, který je bootstrapován aplikací ng-app, nebo se skript, který ho definuje, spustí před načtením AngularJS. Zaregistrujte filtr na stejném modulu a nejprve načtěte knihovnu.

Ano. Píping sbírka uvnitř ng-opakovat filtruje nebo seřazuje položky před jejich vykreslením. Filtr přijímá celé pole a musí vrátit pole.

Ano. AI Asistenti vytvoří továrnu, vrácenou funkci a syntaxi zobrazení z prostého popisu formátovacího pravidla. Zkontrolujte, zda vygenerovaný filtr chrání před nedefinovaným vstupem.

Nástroje umělé inteligence přepíší továrnu jako třídu implementující PipeTransform a přesunou každý další parametr do metody transformace. Revzobrazit libovolný $stateful filtr ručně, protože nečisté kanály musí být explicitně deklarovány.

Shrňte tento příspěvek takto: