Фильтры AngularJS и пользовательский фильтр AngularJS с примером

Что такое фильтр в AngularJS?

A Фильтр в AngularJS помогает форматировать значение выражения для отображения пользователю без изменения исходного формата. Например, если вы хотите, чтобы ваша строка была в нижнем или верхнем регистре, вы можете сделать это с помощью фильтров. Существуют встроенные фильтры, такие как «строчный» и «прописной», которые могут соответственно получать выходные данные в нижнем и верхнем регистре.

Пользовательский фильтр AngularJS

Иногда встроенные фильтры Angular не могут удовлетворить потребности или требования фильтрации вывода. В таком случае можно создать собственный фильтр AngularJS, который сможет передавать выходные данные требуемым образом.

Аналогично для чисел можно использовать и другие фильтры. В этом уроке мы увидим различные стандартные встроенные фильтры, доступные в Angular.

Как создать собственный фильтр в AngularJS

В приведенном ниже примере пользовательского фильтра AngularJS мы собираемся передать строку в представление из контроллера через объект области, но мы не хотим, чтобы строка отображалась как есть.

Мы хотим быть уверены, что всякий раз, когда мы отображаем строку, мы будем передавать в нее специальный фильтр. AngularJS, который добавит еще одну строку и отобразит завершенную строку пользователю.

Создать собственный фильтр в AngularJS

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

Код Пояснение

  1. Здесь мы передаем строку Angular в переменную-член под названием учебник и прикрепляем ее к объекту области.
  2. Angular предоставляет сервис фильтров, который можно использовать для создания собственного фильтра. «Демофильтр» — это имя, данное нашему фильтру.
  3. Это стандартный способ определения пользовательских фильтров в AngularJS, при котором возвращается функция. Эта функция содержит пользовательский код для создания пользовательского фильтра. В нашей функции мы берем строку «Angular», которая передается из нашего представления в фильтр, и добавляем к ней строку «Tutorial».
  4. Мы используем наш Demofilter для нашей переменной-члена, которая была передана из контроллера в представление.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Создать собственный фильтр в AngularJS

Из вывода,

  • Видно, что наш пользовательский фильтр был применен и
  • Слово «Tutorial» было добавлено в конец строки, которая была передана в переменной-члене «tutorial».

Фильтр строчных букв в AngularJS

Этот фильтр принимает строковый вывод, форматирует строку и отображает все символы в строке в нижнем регистре.

Давайте рассмотрим пример фильтров AngularJS с опцией AngularJS в нижний регистр.

В приведенном ниже примере мы будем использовать контроллер для отправки строки в представление через объект области. Затем мы воспользуемся фильтром в представлении, чтобы преобразовать строку в нижний регистр.

Фильтр строчных букв в AngularJS

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

Код Пояснение

  1. Здесь мы передаем строку, которая представляет собой комбинацию символов нижнего и верхнего регистра, в переменной-члене с именем «tutorialName» и прикрепляем ее к объекту области. Значение передаваемой строки — «AngularJS».
  2. Мы используем переменную-член «tutorialName» и помещаем символ фильтра (|), что означает, что выходные данные необходимо изменить с помощью фильтра. Затем мы используем ключевое слово нижнего регистра, чтобы сказать, что нужно использовать встроенный фильтр для вывода всей строки в нижнем регистре.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Фильтр строчных букв в AngularJS

С выхода

  • Видно, что строка «AngularJS», переданная в переменную TutorialName, представляющая собой комбинацию символов нижнего и верхнего регистра, была выполнена.
  • После выполнения окончательный вывод будет в нижнем регистре, как показано выше.

Фильтр верхнего регистра в AngularJS

Этот фильтр аналогичен фильтру нижнего регистра; разница в том, что он принимает строковый вывод, форматирует строку и отображает все символы в строке в верхнем регистре.

Давайте посмотрим на пример фильтра использования заглавных букв в AngularJS с опцией нижнего регистра.

В приведенном ниже примере использования заглавных букв AngularJS мы будем использовать контроллер для отправки строки в представление через объект области. Затем мы воспользуемся фильтром в представлении, чтобы преобразовать строку в верхний регистр.

Фильтр верхнего регистра в AngularJS

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

Код Пояснение

  1. Здесь мы передаем строку, которая представляет собой комбинацию символов нижнего и верхнего регистра «Angular JS», в переменной-члене с именем «tutorialName» и прикрепляем ее к объекту области.
  2. Мы используем переменную-член «tutorialName» и помещаем символ фильтра (|), что означает, что выходные данные необходимо изменить с помощью фильтра. Затем мы используем ключевое слово в верхнем регистре, чтобы сказать, что нужно использовать встроенный фильтр для вывода всей строки в верхнем регистре.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Фильтр верхнего регистра в AngularJS

Из вывода,

  • Видно, что строка, переданная в переменную TutorialName, представляющая собой комбинацию символов нижнего и верхнего регистра, была выведена только в верхнем регистре.

Числовой фильтр в AngularJS

Этот фильтр форматирует число и может применять ограничение на количество десятичных знаков числа.

Давайте посмотрим на пример фильтров AngularJS с номерной опцией.

В приведенном ниже примере

Мы хотели продемонстрировать, как можно использовать числовой фильтр для форматирования отображаемого числа с ограничением в два знака после запятой.

Мы будем использовать контроллер для отправки числа в представление через объект области. Затем мы воспользуемся фильтром в представлении, чтобы применить числовой фильтр.

Числовой фильтр в AngularJS

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

Код Пояснение

  1. Здесь мы передаем число с большим количеством десятичных знаков в переменной-члене под названием TutorialID и прикрепляем его к объекту области.
  2. Мы используем переменную-член TutorialID и помещаем символ фильтра (|) вместе с числовым фильтром. Теперь в числе:2 двойка означает, что фильтр должен ограничить количество десятичных знаков до 2.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Числовой фильтр в AngularJS

Из вывода,

  • Видно, что число, переданное в переменной TutorialID с большим количеством десятичных знаков, было ограничено двумя десятичными знаками из-за примененного числа: 2 фильтра.

Валютный фильтр в AngularJS

Этот фильтр форматирует фильтр валюты в число.

Предположим, если вы хотите отобразить число в такой валюте, как $, то можно использовать этот фильтр.

В приведенном ниже примере мы будем использовать контроллер для отправки числа в представление через объект области. Затем мы будем использовать фильтр в представлении, чтобы применить текущий фильтр.

Валютный фильтр в AngularJS

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

Код Пояснение

  1. Здесь мы передаем число в переменную-член под названиемtutorialprice и прикрепляем его к объекту области.
  2. Мы используем переменную-член Tutorialprice и помещаем символ фильтра (|) вместе с фильтром валюты. Обратите внимание, что применяемая валюта зависит от языковых настроек, примененных к аппарату.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

Валютный фильтр в AngularJS

С выхода

  • Видно, что символ валюты добавлен к числу, которое было передано в переменнойtutorialprice.
  • В нашем случае, поскольку языковые настройки — английский (США), в качестве валюты вставляется символ $.

JSON-фильтр в AngularJS

Этот фильтр форматирует JSON как входные данные и применяет фильтр AngularJS JSON для получения выходных данных в формате JSON.

В приведенном ниже примере мы будем использовать контроллер для отправки объекта типа JSON в представление через объект области. Затем мы воспользуемся фильтром в представлении, чтобы применить фильтр JSON.

JSON-фильтр в AngularJS

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

Код Пояснение

  1. Здесь мы передаем число в переменной-члене под названием «tutorial» и прикрепляем его к объекту области видимости. Эта переменная-член содержит строку типа JSON с Tutorial ID: 12 и TutorialName: «Angular».
  2. Мы используем руководство по переменной-члену и добавляем символ фильтра (|) вместе с фильтром JSON.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Вывод:

JSON-фильтр в AngularJS

Из вывода,

  • Видно, что JSON как строка анализируется и отображает правильный объект JSON в браузере.

Итого

  • Фильтры используются для изменения способа отображения вывода пользователю.
  • Angular предоставляет встроенные фильтры, такие как фильтры нижнего и верхнего регистра, для изменения вывода строк на нижний и верхний регистр соответственно.
  • Также предусмотрена возможность изменения способа отображения чисел с помощью числового фильтра путем указания количества десятичных знаков, отображаемых в числе.
  • Можно также использовать фильтр валюты, чтобы добавить символ валюты к любому числу.
  • Если требуется иметь специальный вывод JSON, angular также предоставляет фильтр JSON для фильтрации любой строки типа JSON в формат JSON.
  • Если есть требование, которому не соответствует ни один из фильтров, определенных в angular, вы можете создать свой собственный фильтр и добавить свой собственный код, чтобы определить тип вывода, который вы хотите получить от фильтра.