Статьи

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

Сентябрь 13, 2017

Вы когда-нибудь использовали фильтры с директивой ng-repeat, как показано в листинге ниже?

<div ng-controller="ProductController">
<table class="table">              
<tr ng-repeat="a in products|filter:searchTerm">
<td>{{a.name}}</td>
<td>{{a.price}}</td>
</tr>
</table>
</div>

Если это так, то вы использовали фильтр в приложении AngularJS. AngularJS предоставляет нам много встроенных директив, таких как поиск. При необходимости AngularJS также позволяет нам создавать собственные фильтры, которые мы рассмотрим в этом посте.

AngularJS дает нам простой API для создания пользовательского фильтра. Вы помните, что мы используем app.controller () для создания контроллеров и app.module () для создания модулей. Точно так же AngularJS предоставил нам API angular.filter для создания пользовательского фильтра в AngularJS.  

Пользовательский фильтр может быть создан с использованием следующего синтаксиса:

 Чтобы создать собственный фильтр, вам необходимо выполнить следующие шаги:

  • Создайте фильтр, используя app.filter, передав пользовательское имя фильтра и функцию в качестве входных параметров в app.filter ()

  • App.filter () вернет функцию

  • Возвращаемая функция может принимать различные необязательные входные параметры.

  • Возвращенная функция будет иметь собственный код фильтра и вернет вывод.

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

MyApp.filter('toUpperCase', function () {
return function (input)
    {
        var output = "";       
        output = input.toUpperCase();
        return output;
    }
})

Мы можем использовать пользовательский фильтр toUpperCase в представлении, как показано в листинге ниже:

<div ng-controller="ProductController">
<table class="table">              
<tr ng-repeat="a in products|filter:searchTerm">
<td>{{a.name|toUpperCase}}</td>
<td>{{a.price}}</td>
</tr>
</table>
</div>

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

MyApp.controller("ProductController", function ($scope) { 
    $scope.products = [
        { 'name': 'pen', 'price': '200' },
        { 'name': 'pencil', 'price': '400' },
        { 'name': 'book', 'price': '2400' },
        { 'name': 'ball', 'price': '400' },
        { 'name': 'eraser', 'price': '1200' },
   ];
})

Теперь мы получим название продукта в прописном регистре, как показано на рисунке ниже:

Фильтр, который мы создали выше, не принимает никаких входных параметров, но допустим, что он нам нужен. Это можно сделать очень легко. В приведенном выше фильтре мы возвращаем каждый символ строки в верхнем регистре. В следующем фильтре мы передадим позицию, и только символ в этой позиции будет преобразован в заглавную. Итак, фильтр, который принимает входной параметр, может быть создан, как показано в листинге ниже:

MyApp.filter('toPositionUpperCase', function () {
    return function (input,position)
    {
        var output = [];       
        var capLetter = input.charAt(position).toUpperCase();
        for (var i = 0; i < input.length; i++) {
            if (i == position) {
                output.push(capLetter);
            } else {
                output.push(input[i]);
            }
        }
        output = output.join('');
        return output;
    }
})

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

<div ng-controller="ProductController">
<table class="table">              
<tr ng-repeat="a in products|filter:searchTerm">
<td>{{a.name|toPositionUpperCase:1}}</td>
<td>{{a.price}}</td>
</tr>
</table>
</div>

Мы получим вторую букву названия продукта в заглавном регистре, как показано на рисунке ниже:

 

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

MyApp.filter('priceGreaterThan', function () {
    return function (input, price) {
        var output = [];
        if (isNaN(price)) {
            output = input;
        }
        else {
            angular.forEach(input, function (item) {
                if (item.price > price) {
                    output.push(item)
                }
            });
        }
        return output;
    }
})

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

<h1>With Custom Filter</h1>
<div ng-controller="ProductController">
<input type="number" class="form-control" placeholder="Search here" ng-model="priceterm" />
<br/>
<table class="table">
<tr ng-repeat="b in products|priceGreaterThan:priceterm">
<td>{{b.name}}</td>
<td>{{b.price}}</td>
</tr>
</table>
</div>

При этом мы получим отфильтрованный массив в представлении, как показано на рисунке ниже:

Итак, вот оно, вот как создать собственный фильтр! Это просто — они не что иное, как функции, которые принимают один вход и необязательные параметры для возврата функции. Надеюсь, вам понравилось читать!

34
Share: