Фильтры в angular js. Создание собственных фильтров в angular

Главная » Видеоуроки » JavaScript » Фильтры в angular js. Создание собственных фильтров в angular
В этом уроке мы рассмотрим использование фильтров в angularjs. В angluar есть несколько встроенных фильтров. Также мы создадим собственный фильтр при помощи метода filter.
Ниже приведен список встроенных фильтров в angular:

  • uppercase — форматирует строку к верхнему регистру
  • lowercase — форматирует строку к нижнему регистру
  • number — форматирует число к строке
  • limitTo — ограничивает вывод элементов исходя из указанного числа
  • date — фопматирует дату к указанному формату
  • currency — форматирует число к валюте
  • filter — выбирает элементы из входного массива

Код урока (встроенные фильтры)

<!DOCTYPE html>
<html ng-app="filtersApp">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body ng-controller="filterCtrl">

        <p>{{upperWord | uppercase}}</p>
        <p>{{lowerWord | lowercase}}</p>
        <p>{{456.78 | number:1}}</p>
        <p>{{50 | currency}}</p>
        <p>{{12834554645 | date: 'dd.mm.yyyy'}}</p>


        <script src="angular.js"></script>
        <script>
            var app = angular.module("filtersApp", []);

            app.controller('filterCtrl', function($scope){
                $scope.upperWord = "Камиль";
                $scope.lowerWord = "Камиль";
            });

        </script>

    </body>
</html>
Как вы поняли из прошлых примеров, фильтры записываются в представлении после прямой черты.
Благодаря двухстороннему связыванию в angular мы можем использовать фильтры в связке с различными событиями — например, фильтрация данных по клику, или фильтрация при вводе. В примерах это фильтр sortByName и встроенный фильтр filter в связке с моделью selectPlayers (живой поиск) соответсвенно.

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

Код урока

<!DOCTYPE html>
<html ng-app="playersApp">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style>
            /*input.ng-invalid-required {
                border: 1px solid red;
            }*/
        </style>
    </head>
    <body>

        <div class="container" ng-controller="playerCtrl">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-horizontal" name="addPlayerForm" novalidate>
                        <legend>Список футболистов</legend>
                          <div class="form-group" ng-class="{'has-error': addPlayerForm.pName.$error.required && addPlayerForm.pName.$dirty}">
                            <label for="playerName" class="col-sm-4 control-label">Имя игрока</label>
                            <div class="col-sm-8">
                              <input type="text" required name="pName" ng-model="playerName" class="form-control" id="playerName" placeholder="Имя игрока">
                              <span class="error" ng-show="addPlayerForm.pName.$dirty && addPlayerForm.pName.$error.required">Введите имя игрока!</span>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="playerTeam" class="col-sm-4 control-label">В какой команде играет</label>
                            <div class="col-sm-8">
                              <input type="text" name="pTeam" ng-model="playerTeam" class="form-control" id="playerTeam" placeholder="В какой команде играет">
                            </div>
                          </div>
                          <div class="form-group" ng-class="{'has-error': addPlayerForm.pCountry.$error.required && addPlayerForm.pCountry.$dirty}">
                            <label for="playerCountry" class="col-sm-4 control-label">Гражданство</label>
                            <div class="col-sm-8">
                                <input type="text" required name="pCountry" ng-model="playerCountry" class="form-control" id="playerCountry" placeholder="Гражданство">
                                <span class="error" ng-show="addPlayerForm.pCountry.$dirty && addPlayerForm.pCountry.$error.required">Игрок не может быть без гражданства!</span>
                            </div>
                          </div>
                          <div class="form-group">
                            <label for="playerGoals" class="col-sm-4 control-label">Сколько голов забил</label>
                            <div class="col-sm-8">
                              <input type="text" name="pGoals" ng-model="playerGoals" class="form-control" id="playerGoals" placeholder="Сколько голов забил">
                            </div>
                          </div>
                          <div class="form-group">
                              <div class="col-sm-8 col-sm-offset-4">
                                  <button ng-disabled="addPlayerForm.pName.$invalid || addPlayerForm.pCountry.$invalid" ng-click="addPlayer(playerName, playerTeam, playerCountry, playerGoals)" class="btn btn-default">Добавить</button>
                              </div>
                          </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <input type="text" name="pSelect" ng-model="selectPlayers" class="form-control">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th ng-click="sortByName('name')">Игрок</th>
                                <th>Команда</th>
                                <th>Национальность</th>
                                <th>Сколько голов забил</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--<tr ng-repeat="player in players | orderBy:nameSorting | filter: selectPlayers | limitTo:2">
                                <td>{{player.name}}</td>
                                <td>{{player.team}}</td>
                                <td>{{player.country}}</td>
                                <td>{{player.goals}}</td>
                            </tr>-->
                            <tr ng-repeat="player in players | goalsFilter">
                                <td>{{player.name}}</td>
                                <td>{{player.team}}</td>
                                <td>{{player.country}}</td>
                                <td>{{player.goals}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <script src="angular.js"></script>
        <script>
            var app = angular.module("playersApp", []);

            var model = [];


            app.controller("playerCtrl", function($scope){
                $scope.players = model;
                $scope.orderByFunction = function(player){
                    return parseInt(player.goals);
                };
                $scope.addPlayer = function(playerName, playerTeam, playerCountry, playerGoals) {
                    $scope.players.push({name: playerName, team: playerTeam, country: playerCountry, goals: playerGoals});
                }

                $scope.sortByName = function(p) {
                    $scope.nameSorting = p;
                }

            });

            app.filter("goalsFilter", function() {
                return function(item) {
                    var tenGoals = [];
                    for(i=0; i<item.length; i++) {
                        if(item[i].goals > 10) {
                            tenGoals.push(item[i]);
                        }
                    }
                    return tenGoals;
                }
            });
        </script>

    </body>
</html>

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This