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

Co je filtr v AngularJS?

A Filtr v AngularJS pomáhá formátovat hodnotu výrazu, aby se zobrazila uživateli, aniž by se změnil původní formát. Pokud například chcete, aby byl váš řetězec psán malými nebo velkými písmeny, můžete to udělat pomocí filtrů. Existují vestavěné filtry, jako jsou „malá písmena“, „velká písmena“, které mohou odpovídajícím způsobem získat malá a velká písmena.

Vlastní filtr AngularJS

Někdy vestavěné filtry v Angularu nemohou splnit potřeby nebo požadavky na filtrování výstupu. V takovém případě lze vytvořit vlastní filtr AngularJS, který dokáže předat výstup požadovaným způsobem.

Podobně pro čísla můžete použít další filtry. Během tohoto tutoriálu uvidíme různé standardní vestavěné filtry dostupné v Angular.

Jak vytvořit vlastní filtr v AngularJS

V níže uvedeném příkladu vlastního filtru AngularJS předáme řetězec do pohledu z ovladače prostřednictvím objektu scope, ale nechceme, aby byl řetězec zobrazen tak, jak je.

Chceme zajistit, že kdykoli zobrazíme řetězec, předáme vlastní filtr AngularJS, který připojí další řetězec a zobrazí dokončený řetězec uživateli.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Vysvětlení kódu

Zde předáváme řetězec „Angular“ v členské proměnné zvané tutorial a připojujeme jej k objektu scope.
Angular poskytuje službu filtrování, kterou lze použít k vytvoření našeho vlastního filtru. „Demofiltr“ je název pro náš filtr.
Toto je standardní způsob, jakým jsou definovány vlastní filtry v AngularJS, kde je vrácena funkce. Tato funkce obsahuje vlastní kód pro vytvoření vlastního filtru. V naší funkci bereme řetězec „Angular“, který je předán z našeho pohledu do filtru, a připojujeme k němu řetězec „Tutorial“.
Používáme náš Demofiltr na naší členské proměnné, která byla předána z ovladače do pohledu.

Pokud je kód úspěšně spuštěn, 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 použit náš vlastní filtr a
Slovo 'Výukový program' bylo připojeno na konec řetězce, který byl předán ve výukovém programu členské proměnné.

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 na malá písmena.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Vysvětlení kódu

Zde předáváme řetězec, který je kombinací malých a velkých písmen v členské proměnné s názvem „tutorialName“ a připojujeme ji k objektu scope. Hodnota předávaného řetězce je „AngularJS“.
Používáme členskou proměnnou „tutorialName“ a vkládáme symbol filtru (|), což znamená, že výstup je třeba upravit pomocí filtru. Poté pomocí klíčového slova s malými písmeny řekneme, že pomocí vestavěného filtru se celý řetězec vypíše malými písmeny.

Pokud je kód úspěšně spuštěn, 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, která byla kombinací malých a velkých písmen.
Po provedení je konečný výstup psán malými písmeny, jak je uvedeno výše.

Filtr velkých písmen v AngularJS

Tento filtr je podobný filtru s malými písmeny; rozdíl je v tom, že přebírá výstup řetězce a formátuje řetězec a zobrazuje všechny znaky v řetězci jako velká písmena.

Podívejme se na příklad použití velkých písmen filtru AngularJS s možností malých písmen.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Vysvětlení kódu

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

Pokud je kód úspěšně spuštěn, 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, která byla kombinací malých a velkých písmen, byl vypsán jako velká.

Filtr čísel v AngularJS

Tento filtr formátuje číslo a může použít limit na desetinné čárky čísla.

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

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

Chtěli jsme předvést, jak můžeme použít číselný filtr k formátování čísla, které se má zobrazit, s omezením na 2 desetinná místa.

Použijeme ovladač k odeslání čísla do pohledu přes objekt scope. Poté použijeme filtr v zobrazení k aplikaci číselného filtru.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

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

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Vysvětlení kódu

Zde 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 je k objektu scope.
Používáme členskou proměnnou tutorialID a vkládáme symbol filtru (|) spolu s filtrem čísel. Nyní v čísle:2, dvojka znamená, že filtr by měl omezit počet desetinných míst na 2.

Pokud je kód úspěšně spuštěn, 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 počtu: 2 filtrů, které byly použity.

Měnový filtr v AngularJS

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

Předpokládejme, že pokud chcete zobrazit číslo s měnou, jako je $, lze tento filtr použít.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Vysvětlení kódu

Zde předáváme číslo v členské proměnné s názvem tutorialprice a připojujeme je k objektu scope.
Používáme členskou proměnnou tutorialprice a vkládáme symbol filtru (|) spolu s filtrem měny. Všimněte si, že měna, která se použije, závisí na nastavení jazyka použitého na zařízení.

Pokud je kód úspěšně spuštěn, 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řipojen k číslu, které bylo předáno ve variabilní ceně tutoriálu.
V našem případě, protože nastavení jazyka je angličtina (Spojené státy americké), je jako měna vložen symbol $.

Filtr JSON v AngularJS

Tento filtr formátuje a JSON jako vstup a použije filtr AngularJS JSON pro poskytnutí výstupu v JSON.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Vysvětlení kódu

Zde předáváme číslo v členské proměnné zvané „tutorial“ a připojujeme jej k objektu scope. Tato členská proměnná obsahuje řetězec typu JSON Tutorial ID:12 a TutorialName:”Angular”.
Používáme tutoriál členské proměnné a vkládáme symbol filtru (|) spolu s filtrem JSON.

Pokud je kód úspěšně spuštěn, 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 zobrazuje správný objekt JSON v prohlížeči.

Shrnutí

Filtry se používají ke změně způsobu zobrazení výstupu uživateli.
Angular poskytuje vestavěné filtry, jako jsou filtry pro malá a velká písmena pro změnu výstupu řetězců na malá a velká písmena.
Existuje také opatření pro změnu způsobu zobrazení čísel pomocí číselného filtru zadáním počtu desetinných míst, která se mají v čísle zobrazit.
Lze také použít filtr měny k připojení symbolu měny k libovolnému číslu.
Pokud existuje požadavek na výstup specifický pro JSON, angular také poskytuje filtr JSON pro filtrování jakéhokoli řetězce podobného JSON do formátu JSON.
Pokud existuje požadavek, který nesplňuje žádný z filtrů definovaných v angular, můžete vytvořit svůj vlastní filtr a přidat svůj vlastní kód, abyste určili typ výstupu, který chcete z filtru.

Máš rád:

Co je filtr v AngularJS?

Vlastní filtr AngularJS

Jak vytvořit vlastní filtr v AngularJS

Vysvětlení kódu

SOUVISEJÍCÍ ČLÁNKY

Filtr malých písmen v AngularJS

Vysvětlení kódu

Filtr velkých písmen v AngularJS

Vysvětlení kódu

Filtr čísel v AngularJS

Vysvětlení kódu

Měnový filtr v AngularJS

Vysvětlení kódu

Filtr JSON v AngularJS

Vysvětlení kódu

Shrnutí