AngularJS
фильтры

Ваш первый фильтр

Фильтры - это особый тип функции, который может изменять, как что-то распечатывается на странице, или может использоваться для фильтрации массива или действия ng-repeat . Вы можете создать фильтр, вызвав метод app.filter() , передав ему имя и функцию. Подробнее о синтаксисе см. Приведенные ниже примеры.

Например, давайте создадим фильтр, который изменит строку на все прописные (по существу, обертку функции .toUpperCase() javascript):

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

// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
    // all the filter does is return a function,
    // which acts as the "filtering" function
    return function(rawString){
        // The filter function takes in the value,
        // which we modify in some way, then return
        // back.
        return rawString.toUpperCase();
    };
}); 

Давайте подробнее рассмотрим, что происходит выше.

Во-первых, мы создаем фильтр под названием «toUppercase», который похож на контроллер; app.filter(...) . Затем функция фильтра возвращает фактическую функцию фильтра. Эта функция принимает один объект, который является объектом для фильтрации, и должен возвращать отфильтрованную версию объекта.

Примечание. В этой ситуации мы предполагаем, что объект, передаваемый в фильтр, является строкой и поэтому знает, что он всегда использует фильтр только для строк. При этом может быть сделано дальнейшее улучшение фильтра, которое будет проходить через объект (если это массив), а затем делает каждый элемент, который является строкой в ​​верхнем регистре.

Теперь давайте использовать наш новый фильтр в действии. Наш фильтр можно использовать двумя способами: либо в угловом шаблоне, либо в виде функции javascript (в качестве введенной угловой ссылки).

Javascript

Просто добавьте угловой объект $filter к вашему контроллеру, а затем используйте его для извлечения функции фильтра, используя свое имя.

app.controller("MyController", function($scope, $filter){
    this.rawString = "Foo";
    this.capsString = $filter("toUppercase")(this.rawString);
});

HTML

Для угловой директивы используйте символ трубы ( | ), а затем имя фильтра в директиве после фактической строки. Например, допустим, у нас есть контроллер под названием MyController который имеет строку с именем rawString как элемент этого.

<div ng-controller="MyController as ctrl">
    <span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>

Примечание редактора: У углового есть ряд встроенных фильтров, включая «верхний регистр», а фильтр «toUppercase» предназначен только для демонстрации, чтобы легко показать, как работают фильтры, но вам не нужно создавать собственную функцию верхнего регистра.

Пользовательский фильтр для удаления значений

Типичным примером использования фильтра является удаление значений из массива. В этом примере мы передаем массив и удалим все найденные в нем нули, возвращая массив.

function removeNulls() {
    return function(list) {
        for (var i = list.length - 1; i >= 0; i--) {
            if (typeof list[i] === 'undefined' ||
                    list[i] === null) {
                list.splice(i, 1);
            }
        }
        return list;
    };
}

Это будет использоваться в HTML как

{{listOfItems | removeNulls}}

или в контроллере, таком как

listOfItems = removeNullsFilter(listOfItems);

Пользовательский фильтр для форматирования значений

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

function convertToBooleanValue() {
    return function(input) {
        if (typeof input !== 'undefined' &&
                input !== null &&
                (input === true || input === 1 || input === '1' || input
                        .toString().toLowerCase() === 'true')) {
            return true;
        }
        return false;
    };
}

Что в HTML будет использоваться следующим образом:

{{isAvailable | convertToBooleanValue}}

Или в контроллере, например:

var available = convertToBooleanValueFilter(isAvailable);

Выполнение фильтра в дочернем массиве

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

контроллер:

(function() {
  "use strict";
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl() {
    var vm = this;
  
    vm.classifications = ["Saloons", "Sedans", "Commercial vehicle", "Sport car"];
    vm.cars = [  
       {  
          "name":"car1",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Sedans"
             }
          ]
       },
       {  
          "name":"car2",
          "classifications":[  
             {  
                "name":"Saloons"
             },
             {  
                "name":"Commercial vehicle"
             }
          ]
       },
       {  
          "name":"car3",
          "classifications":[  
             {  
                "name":"Sport car"
             },
             {  
                "name":"Sedans"
             }
          ]
       }
    ];
  }
})();

Посмотреть:

<body ng-app="app" ng-controller="mainCtrl as main">
  Filter car by classification:
  <select ng-model="classificationName"
          ng-options="classification for classification in main.classifications"></select>
  <br>
  <ul>
    <li ng-repeat="car in main.cars |
                   filter: { classifications: { name: classificationName } } track by $index"
                  ng-bind-template="{{car.name}} - {{car.classifications | json}}">
    </li>
  </ul>
</body>

Проверьте все DEMO .

Использование фильтров в контроллере или услуге

Вводя $filter , любой определенный фильтр в вашем Угловом модуле может использоваться в контроллерах, службах, директивах или даже в других фильтрах.

angular.module("app")
  .service("users", usersService)
  .controller("UsersController", UsersController);

function usersService () {
  this.getAll = function () {
    return [{
      id: 1,
      username: "john"
    }, {
      id: 2,
      username: "will"
    }, {
      id: 3,
      username: "jack"
    }];
  };
}

function UsersController ($filter, users) {
  var orderByFilter = $filter("orderBy");

  this.users = orderByFilter(users.getAll(), "username");
  // Now the users are ordered by their usernames: jack, john, will

  this.users = orderByFilter(users.getAll(), "username", true);
  // Now the users are ordered by their usernames, in reverse order: will, john, jack
}

Доступ к фильтруемому списку извне ng-repeat

Иногда вам нужно получить доступ к результатам ваших фильтров из-за пределов ng-repeat , возможно, для указания количества элементов, которые были отфильтрованы. Вы можете сделать это, используя синтаксис as [variablename] в ng-repeat .

<ul>
  <li ng-repeat="item in vm.listItems | filter:vm.myFilter as filtered">
    {{item.name}}
  </li>
</ul>
<span>Showing {{filtered.length}} of {{vm.listItems.length}}</span>