Фильтры AngularJS и пользовательский фильтр AngularJS с примером
Что такое фильтр в AngularJS?
A Фильтр в AngularJS помогает форматировать значение выражения для отображения пользователю без изменения исходного формата. Например, если вы хотите, чтобы ваша строка была в нижнем или верхнем регистре, вы можете сделать это с помощью фильтров. Существуют встроенные фильтры, такие как «строчный» и «прописной», которые могут соответственно получать выходные данные в нижнем и верхнем регистре.
Пользовательский фильтр AngularJS
Иногда встроенные фильтры Angular не могут удовлетворить потребности или требования фильтрации вывода. В таком случае можно создать собственный фильтр AngularJS, который сможет передавать выходные данные требуемым образом.
Аналогично для чисел можно использовать и другие фильтры. В этом уроке мы увидим различные стандартные встроенные фильтры, доступные в Angular.
Как создать собственный фильтр в 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>
Код Пояснение
- Здесь мы передаем строку Angular в переменную-член под названием учебник и прикрепляем ее к объекту области.
- Angular предоставляет сервис фильтров, который можно использовать для создания собственного фильтра. «Демофильтр» — это имя, данное нашему фильтру.
- Это стандартный способ определения пользовательских фильтров в AngularJS, при котором возвращается функция. Эта функция содержит пользовательский код для создания пользовательского фильтра. В нашей функции мы берем строку «Angular», которая передается из нашего представления в фильтр, и добавляем к ней строку «Tutorial».
- Мы используем наш Demofilter для нашей переменной-члена, которая была передана из контроллера в представление.
Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.
Вывод:
Из вывода,
- Видно, что наш пользовательский фильтр был применен и
- Слово «Tutorial» было добавлено в конец строки, которая была передана в переменной-члене «tutorial».
Фильтр строчных букв в 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>
Код Пояснение
- Здесь мы передаем строку, которая представляет собой комбинацию символов нижнего и верхнего регистра, в переменной-члене с именем «tutorialName» и прикрепляем ее к объекту области. Значение передаваемой строки — «AngularJS».
- Мы используем переменную-член «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"> 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>
Код Пояснение
- Здесь мы передаем строку, которая представляет собой комбинацию символов нижнего и верхнего регистра «Angular JS», в переменной-члене с именем «tutorialName» и прикрепляем ее к объекту области.
- Мы используем переменную-член «tutorialName» и помещаем символ фильтра (|), что означает, что выходные данные необходимо изменить с помощью фильтра. Затем мы используем ключевое слово в верхнем регистре, чтобы сказать, что нужно использовать встроенный фильтр для вывода всей строки в верхнем регистре.
Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.
Вывод:
Из вывода,
- Видно, что строка, переданная в переменную TutorialName, представляющая собой комбинацию символов нижнего и верхнего регистра, была выведена только в верхнем регистре.
Числовой фильтр в 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>
Код Пояснение
- Здесь мы передаем число с большим количеством десятичных знаков в переменной-члене под названием TutorialID и прикрепляем его к объекту области.
- Мы используем переменную-член TutorialID и помещаем символ фильтра (|) вместе с числовым фильтром. Теперь в числе:2 двойка означает, что фильтр должен ограничить количество десятичных знаков до 2.
Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.
Вывод:
Из вывода,
- Видно, что число, переданное в переменной TutorialID с большим количеством десятичных знаков, было ограничено двумя десятичными знаками из-за примененного числа: 2 фильтра.
Валютный фильтр в 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>
Код Пояснение
- Здесь мы передаем число в переменную-член под названиемtutorialprice и прикрепляем его к объекту области.
- Мы используем переменную-член Tutorialprice и помещаем символ фильтра (|) вместе с фильтром валюты. Обратите внимание, что применяемая валюта зависит от языковых настроек, примененных к аппарату.
Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.
Вывод:
С выхода
- Видно, что символ валюты добавлен к числу, которое было передано в переменнойtutorialprice.
- В нашем случае, поскольку языковые настройки — английский (США), в качестве валюты вставляется символ $.
JSON-фильтр в AngularJS
Этот фильтр форматирует JSON как входные данные и применяет фильтр AngularJS JSON для получения выходных данных в формате JSON.
В приведенном ниже примере мы будем использовать контроллер для отправки объекта типа JSON в представление через объект области. Затем мы воспользуемся фильтром в представлении, чтобы применить фильтр 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>
Код Пояснение
- Здесь мы передаем число в переменной-члене под названием «tutorial» и прикрепляем его к объекту области видимости. Эта переменная-член содержит строку типа JSON с Tutorial ID: 12 и TutorialName: «Angular».
- Мы используем руководство по переменной-члену и добавляем символ фильтра (|) вместе с фильтром JSON.
Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.
Вывод:
Из вывода,
- Видно, что JSON как строка анализируется и отображает правильный объект JSON в браузере.
Итого
- Фильтры используются для изменения способа отображения вывода пользователю.
- Angular предоставляет встроенные фильтры, такие как фильтры нижнего и верхнего регистра, для изменения вывода строк на нижний и верхний регистр соответственно.
- Также предусмотрена возможность изменения способа отображения чисел с помощью числового фильтра путем указания количества десятичных знаков, отображаемых в числе.
- Можно также использовать фильтр валюты, чтобы добавить символ валюты к любому числу.
- Если требуется иметь специальный вывод JSON, angular также предоставляет фильтр JSON для фильтрации любой строки типа JSON в формат JSON.
- Если есть требование, которому не соответствует ни один из фильтров, определенных в angular, вы можете создать свой собственный фильтр и добавить свой собственный код, чтобы определить тип вывода, который вы хотите получить от фильтра.