Filtry AngularJS i filtr niestandardowy AngularJS z przykładem

Co to jest filtr w AngularJS?

A Filtruj w AngularJS pomaga sformatować wartość wyrażenia w celu wyświetlenia użytkownikowi bez zmiany oryginalnego formatu. Na przykład, jeśli chcesz, aby ciąg znaków był pisany małymi lub wielkimi literami, możesz to zrobić za pomocą filtrów. Istnieją wbudowane filtry, takie jak „małe litery”, „wielkie litery”, które mogą odpowiednio pobrać małe i wielkie litery.

Filtr niestandardowy AngularJS

Czasami wbudowane filtry w Angular nie są w stanie spełnić potrzeb lub wymagań dotyczących filtrowania danych wyjściowych. W takim przypadku można utworzyć niestandardowy filtr AngularJS, który może przekazać dane wyjściowe w wymagany sposób.

Podobnie, w przypadku liczb, możesz użyć innych filtrów. Podczas tego samouczka zobaczymy różne standardowe wbudowane filtry dostępne w Angular.

Jak utworzyć niestandardowy filtr w AngularJS

W poniższym przykładzie niestandardowego filtra AngularJS przekażemy ciąg znaków do widoku z kontrolera poprzez obiekt zakresu, ale nie chcemy, aby ciąg znaków był wyświetlany w takiej postaci, w jakiej jest.

Chcemy mieć pewność, że za każdym razem, gdy wyświetlimy ciąg, przekażemy niestandardowy filtr angularjs, który dołączy kolejny ciąg i wyświetli użytkownikowi wypełniony ciąg.

<!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>

Objaśnienie kodu

Tutaj przekazujemy ciąg „Angular” do zmiennej składowej o nazwie tutorial i dołączamy go do obiektu zakresu.
Angular udostępnia usługę filtrowania, za pomocą której można stworzyć własny filtr. „Demofiltr” to nazwa nadana naszemu filtrowi.
Jest to standardowy sposób definiowania niestandardowych filtrów w AngularJS, w którym zwracana jest funkcja. Ta funkcja zawiera niestandardowy kod umożliwiający utworzenie niestandardowego filtra. W naszej funkcji pobieramy ciąg „Angular”, który jest przekazywany z naszego widoku do filtra i dołączamy do niego ciąg „Tutorial”.
Używamy naszego Demofiltera na naszej zmiennej członkowskiej, która została przekazana z kontrolera do widoku.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

Widać, że nasz niestandardowy filtr został zastosowany i
Na końcu ciągu znaków przekazanego w samouczku dotyczącym zmiennej składowej dodano słowo „Tutorial”.

Filtr małych liter w AngularJS

Ten filtr pobiera wynik w postaci ciągu znaków, formatuje ciąg i wyświetla wszystkie znaki w ciągu jako małe litery.

Przyjrzyjmy się przykładowi filtrów AngularJS z opcją AngularJS na małe litery.

W poniższym przykładzie użyjemy kontrolera do wysłania ciągu znaków do widoku za pośrednictwem obiektu zakresu. Następnie użyjemy filtra w widoku, aby przekonwertować ciąg znaków na małe litery.

<!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>

Objaśnienie kodu

Tutaj przekazujemy ciąg znaków będący kombinacją małych i wielkich liter w zmiennej składowej o nazwie „tutorialName” i dołączamy go do obiektu zakresu. Wartość przekazywanego ciągu to „AngularJS”.
Używamy zmiennej składowej „tutorialName” i umieszczamy symbol filtra (|), co oznacza, że dane wyjściowe muszą zostać zmodyfikowane za pomocą filtra. Następnie używamy słowa kluczowego smallcase, aby powiedzieć, że należy użyć wbudowanego filtra do wyświetlenia całego ciągu znaków małymi literami.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia

Można zauważyć, że ciąg „AngularJS” przekazany w zmiennej tutorialName będący kombinacją małych i wielkich liter został wykonany.
Po wykonaniu wynik końcowy jest pisany małymi literami, jak pokazano powyżej.

Filtr wielkich liter w AngularJS

Ten filtr jest podobny do filtra małych liter; różnica polega na tym, że przyjmuje wynik w postaci ciągu znaków, formatuje ciąg i wyświetla wszystkie znaki w ciągu jako wielkie.

Spójrzmy na przykład filtra wielkich liter AngularJS z opcją małych liter.

W poniższym przykładzie pisanym wielką literą w AngularJS użyjemy kontrolera do wysłania ciągu znaków do widoku za pośrednictwem obiektu zakresu. Następnie użyjemy filtra w widoku, aby przekonwertować ciąg znaków na wielkie litery.

<!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>

Objaśnienie kodu

Tutaj przekazujemy ciąg będący kombinacją małych i wielkich liter „Angular JS” w zmiennej składowej o nazwie „tutorialName” i dołączamy go do obiektu zakresu.
Używamy zmiennej składowej „tutorialName” i umieszczamy symbol filtra (|), co oznacza, że dane wyjściowe muszą zostać zmodyfikowane za pomocą filtra. Następnie używamy słowa kluczowego „wielkie litery”, aby powiedzieć, że wbudowany filtr ma wyświetlać cały ciąg znaków wielkimi literami.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

Można zauważyć, że ciąg znaków przekazany do zmiennej tutorialName, będący kombinacją małych i wielkich liter, został zapisany wyłącznie wielkimi literami.

Filtr liczbowy w AngularJS

Ten filtr formatuje liczbę i może zastosować ograniczenie liczby miejsc dziesiętnych dla liczby.

Spójrzmy na przykład filtrów AngularJS z opcją liczbową.

W poniższym przykładzie

Chcieliśmy pokazać, jak możemy użyć filtra liczbowego do sformatowania liczby wyświetlanej z ograniczeniem do 2 miejsc po przecinku.

Użyjemy kontrolera, aby wysłać numer do widoku za pośrednictwem obiektu zakresu. Następnie użyjemy filtra w widoku, aby zastosować filtr liczbowy.

<!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>

Objaśnienie kodu

W tym przypadku przekazujemy liczbę z większą liczbą miejsc po przecinku do zmiennej składowej o nazwie tutorialID i dołączamy ją do obiektu zakresu.
Używamy zmiennej składowej tutorialID i umieszczamy symbol filtra (|) wraz z filtrem liczbowym. Teraz w numerze: 2, dwójka wskazuje, że filtr powinien ograniczyć liczbę miejsc po przecinku do 2.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

Można zauważyć, że liczba przekazana do zmiennej tutorialID posiadającej dużą liczbę miejsc dziesiętnych została ograniczona do 2 miejsc po przecinku ze względu na zastosowaną liczbę filtrów: 2.

Filtr walutowy w AngularJS

Ten filtr formatuje filtr walutowy na liczbę.

Załóżmy, że jeśli chcesz wyświetlić liczbę w walucie takiej jak $, możesz użyć tego filtra.

W poniższym przykładzie użyjemy kontrolera do wysłania numeru do widoku za pośrednictwem obiektu zakresu. Następnie użyjemy filtra w widoku, aby zastosować bieżący filtr.

<!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>

Objaśnienie kodu

Tutaj przekazujemy liczbę do zmiennej składowej o nazwie tutorialprice i dołączamy ją do obiektu zakresu.
Używamy zmiennej członkowskiej tutorialprice i umieszczamy symbol filtra (|) wraz z filtrem waluty. Należy pamiętać, że stosowana waluta zależy od ustawień języka zastosowanych w urządzeniu.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia

Można zauważyć, że do liczby przekazanej w zmiennej tutorialprice dołączono symbol waluty.
W naszym przypadku, ponieważ ustawienia języka to angielski (Stany Zjednoczone), jako walutę wstawiany jest symbol $.

Filtr JSON w AngularJS

Ten filtr formatuje plik a JSON jak dane wejściowe i stosuje filtr AngularJS JSON, aby uzyskać dane wyjściowe w formacie JSON.

W poniższym przykładzie użyjemy kontrolera do wysłania obiektu typu JSON do widoku za pośrednictwem obiektu zakresu. Następnie użyjemy filtra w widoku, aby zastosować filtr 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>

Objaśnienie kodu

Tutaj przekazujemy liczbę do zmiennej składowej zwanej „samouczkiem” i dołączamy ją do obiektu zakresu. Ta zmienna członkowska zawiera ciąg znaków typu JSON o identyfikatorze samouczka: 12 i nazwie samouczka: „Angular”.
Korzystamy z samouczka dotyczącego zmiennych składowych i umieszczamy symbol filtra (|) wraz z filtrem JSON.

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Z wyjścia,

Można zauważyć, że JSON, podobnie jak ciąg znaków, jest analizowany i wyświetlany jako właściwy obiekt JSON w przeglądarce.

Podsumowanie

Filtry służą do zmiany sposobu wyświetlania wyników użytkownikowi.
Angular udostępnia wbudowane filtry, takie jak filtry małych i wielkich liter, które umożliwiają zmianę wyników wyjściowych ciągów odpowiednio na małe i wielkie litery.
Istnieje również możliwość zmiany sposobu wyświetlania liczb poprzez użycie filtra liczbowego, poprzez określenie liczby miejsc dziesiętnych, które mają być wyświetlane w liczbie.
Można również użyć filtra waluty, aby dołączyć symbol waluty do dowolnej liczby.
Jeśli wymagane jest posiadanie danych wyjściowych specyficznych dla JSON, angular udostępnia również filtr JSON do filtrowania dowolnego ciągu znaków podobnego do JSON do formatu JSON.
Jeśli istnieje wymaganie, którego nie spełnia żaden z filtrów zdefiniowanych w angular, możesz utworzyć własny filtr i dodać niestandardowy kod, aby określić typ wyniku, jaki chcesz uzyskać z filtra.

Co to jest filtr w AngularJS?

Filtr niestandardowy AngularJS

Jak utworzyć niestandardowy filtr w AngularJS

Objaśnienie kodu

POWIĄZANE ARTYKUŁY

Filtr małych liter w AngularJS

Objaśnienie kodu

Filtr wielkich liter w AngularJS

Objaśnienie kodu

Filtr liczbowy w AngularJS

Objaśnienie kodu

Filtr walutowy w AngularJS

Objaśnienie kodu

Filtr JSON w AngularJS

Objaśnienie kodu

Podsumowanie

Zapisz się do newslettera