Фильтры в AngularJS

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

Когда вы сталкиваетесь с необходимостью вывести данные из контроллера в другом виде или формате, то вам необходимо использовать фильтры. Давайте посмотрим на примере фильтра для денег, как это работает.

Для начала создадим mainCtrl и выведем внутри него переменную money.

<div ng-controller='mainCtrl'>
    {{money}}
</div>

Теперь опишем этот контроллер и присвоим переменную money в 244.

var app = angular.module('app', []);

app.controller('mainCtrl', function ($scope) {
    $scope.money = "244";
});

Если мы посмотрим в браузер, то увидим строку 244. Как же применить к этой переменной фильтр? Фильтры применяются через палку и дальше пишется название фильтра, например, moneyFilter.

<div ng-controller='mainCtrl'>
    {{money | moneyFilter}}
</div>

Давайте теперь создадим этот фильтр. Фильтр создается с помощью слова filter. Первым параметром идет название фильтра, а вторым функция. Фильтр обязательно должен возвращать функцию.

app.filter('moneyFilter', function () {
    return function (str) {
        console.log('str', str);
        return str;
    }
});

На вход эта функция принимает строку и этой строкой является та переменная, на которую мы применяем фильтр. Так же функция обязательно должна возвращать значение. Пока вернем str - то же значение, которые мы получили.

Как мы видим, в консоли браузера вывелось str 244. Теперь мы можем строку, которая у нас есть преобразовывать как угодно. Самый простой вариант - это заменить ее вообще на другое значение

app.filter('moneyFilter', function () {
    return function (str) {
        console.log('str', str);
        return 500;
    }
});

Значение в браузере сразу же изменилось на 500. Фильтр в AngularJS позволяет менять значение на какое угодно.

Теперь давайте попробуем сделать что-то более полезное. Например, мы получаем от бекенда значение в формате

app.controller('mainCtrl', function ($scope) {
    $scope.money1 = "1.22$";
    $scope.money2 = "$2.33";
    $scope.money3 = "4.33";
});

Как мы видим, все три переменных в разном формате и наша задача, вывести их единообразно на фронтенде в одном и том же формате.

Давайте изменим шаблон и выведем все три переменные, к которым мы будем применять moneyFilter.

<div ng-controller='mainCtrl'>
    {{money1 | moneyFilter}}
    {{money2 | moneyFilter}}
    {{money3 | moneyFilter}}
</div>

Сначала давайте узнаем какой последний и первый символ у денег. Так же создадим переменную slicedPart (отрезанная часть).

app.filter('moneyFilter', function () {
    return function (str) {
        var lastChar = str.slice(-1);
        var firstChar = str.slice(0, 1);
    }
});

Делаем проверку для первого варианта. Если последний символ - это знак $, то в slicedPart присвоим строку от первого символа до предпоследнего. Возвращаем данные в формате $ + slicedPart.

app.filter('moneyFilter', function () {
    return function (str) {
        var lastChar = str.slice(-1);
        var firstChar = str.slice(0, 1);

        if (lastChar === '$') {
            slicedPart = str.slice(0, str.length - 1);
            return $ + slicedPart.
        }
    }
});

Второй вариант. Если первый символ будет долларом, то возвращаем строку не изменяя.

app.filter('moneyFilter', function () {
    return function (str) {
        var lastChar = str.slice(-1);
        var firstChar = str.slice(0, 1);

        if (lastChar === '$') {
            slicedPart = str.slice(0, str.length - 1);
            return $ + slicedPart.
        } else if (firstChar === '$') {
            return str;
        }
    }
});

В третьем варианте всегда возращаем строку, дописывая перед ней знак доллара.

app.filter('moneyFilter', function () {
    return function (str) {
        var lastChar = str.slice(-1);
        var firstChar = str.slice(0, 1);

        if (lastChar === '$') {
            slicedPart = str.slice(0, str.length - 1);
            return $ + slicedPart.
        } else if (firstChar === '$') {
            return str;
        } else {
            return '$' + str;
        }
    }
});

Если мы посмотрим в браузер, то увидим, что все три переменные вывелись в одном и том же формате. Фильтры помогают преобразовывать данные, в каком бы мы виде их не получили, так как нам нужно и moneyFilter - это один из примеров фильтра, который можно переиспользовать в любой части приложения для вывода денег.

#8 Фильтры в AngularJS