Иногда встроенные фильтры в Angular не могут удовлетворить потребности или требования для фильтрации вывода. В таком случае может быть создан пользовательский фильтр, который может передавать выходные данные требуемым образом.
Как создать пользовательский фильтр
В приведенном ниже примере мы собираемся передать строку в представление из контроллера через объект области, но мы не хотим, чтобы строка отображалась как есть.
Мы хотим убедиться, что всякий раз, когда мы отображаем строку, мы передаем пользовательский фильтр, который добавит еще одну строку и отобразит завершенную строку для пользователя.
<!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» в переменную-член, называемую tutorial, и присоединяем ее к объекту области.
- Angular предоставляет сервис фильтрации, который можно использовать для создания нашего пользовательского фильтра. «Демофильтр» — это имя, данное нашему фильтру.
- Это стандартный способ определения пользовательского фильтра, при котором функция возвращается. Эта функция содержит пользовательский код для создания пользовательского фильтра. В нашей функции мы берем строку «Angular», которая передается из нашего представления в фильтр, и добавляем к ней строку «Tutorial».
- Мы используем наш Demofilter для нашей переменной-члена, которая была передана из контроллера в представление.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из вывода
- Видно, что наш пользовательский фильтр был применен и
- Слово «Учебник» было добавлено в конце строки, которая была передана в учебнике по переменным элементам.
Резюме:
Если есть требование, которое не выполняется ни одним из фильтров, определенных в angular, вы можете создать свой собственный фильтр и добавить свой собственный код, чтобы определить тип вывода, который вы хотите получить из фильтра.a