AngularJS
Filtry

Twój pierwszy filtr

Filtry są specjalnym typem funkcji, która może modyfikować sposób, w jaki coś jest drukowane na stronie, lub może być używana do filtrowania tablicy lub akcji ng-repeat . Możesz utworzyć filtr, wywołując app.filter() , przekazując mu nazwę i funkcję. Zobacz poniższe przykłady, aby uzyskać szczegółowe informacje na temat składni.

Na przykład, stwórzmy filtr, który zmieni ciąg znaków na wielkie litery (zasadniczo opakowanie funkcji javascript .toUpperCase() ):

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();
    };
}); 

Przyjrzyjmy się bliżej temu, co dzieje się powyżej.

Najpierw tworzymy filtr o nazwie „toUppercase”, który jest jak kontroler; app.filter(...) . Następnie funkcja tego filtra zwraca rzeczywistą funkcję filtra. Ta funkcja pobiera pojedynczy obiekt, który jest obiektem do filtrowania, i powinna zwrócić przefiltrowaną wersję obiektu.

Uwaga: W tej sytuacji zakładamy, że obiekt przekazywany do filtra jest łańcuchem, dlatego też zawsze wiemy, że filtr powinien być używany tylko na łańcuchach. To powiedziawszy, można by ulepszyć filtr, który zapętla obiekt (jeśli jest to tablica), a następnie sprawia, że każdy element, który jest ciągiem, jest pisany wielkimi literami.

Teraz zastosujmy nasz nowy filtr w akcji. Nasz filtr może być używany na dwa sposoby, w szablonie kątowym lub jako funkcja javascript (jako wstrzyknięty odnośnik kątowy).

JavaScript

Wystarczy wstrzyknąć kątowy obiekt $filter do kontrolera, a następnie użyć go do odzyskania funkcji filtrowania za pomocą jego nazwy.

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

HTML

W przypadku dyrektywy kątowej użyj symbolu potoku ( | ), a następnie nazwy filtru w dyrektywie po rzeczywistym ciągu. Załóżmy na przykład, że mamy kontroler o nazwie MyController który ma ciąg o nazwie rawString jako jego element.

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

Uwaga edytora: Angular ma wiele wbudowanych filtrów, w tym „wielkie litery”, a filtr „toUppercase” ma jedynie charakter demonstracyjny, aby łatwo pokazać, jak działają filtry, ale nie musisz budować własnej funkcji wielkich liter.

Filtr niestandardowy do usuwania wartości

Typowym przypadkiem użycia filtra jest usunięcie wartości z tablicy. W tym przykładzie przekazujemy tablicę i usuwamy wszelkie znalezione w niej wartości null, zwracając tablicę.

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;
    };
}

Byłoby to użyte w HTML

{{listOfItems | removeNulls}}

lub w kontrolerze takim jak

listOfItems = removeNullsFilter(listOfItems);

Filtr niestandardowy do formatowania wartości

Innym przykładem użycia filtrów jest sformatowanie pojedynczej wartości. W tym przykładzie przekazujemy wartość i zwracamy odpowiednią prawdziwą wartość logiczną.

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;
    };
}

Który w kodzie HTML byłby użyty w ten sposób:

{{isAvailable | convertToBooleanValue}}

Lub w kontrolerze takim jak:

var available = convertToBooleanValueFilter(isAvailable);

Przeprowadzanie filtrowania w tablicy potomnej

Ten przykład został wykonany w celu zademonstrowania, w jaki sposób można przeprowadzić głęboki filtr w tablicy podrzędnej bez konieczności stosowania niestandardowego filtra.

Kontroler:

(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"
             }
          ]
       }
    ];
  }
})();

Widok:

<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>

Sprawdź pełną wersję DEMO .

Korzystanie z filtrów w kontrolerze lub usłudze

Przez wstrzyknięcie $filter , dowolny zdefiniowany filtr w module Angular może być użyty w kontrolerach, usługach, dyrektywach, a nawet innych filtrach.

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
}

Dostęp do przefiltrowanej listy spoza powtórzenia ng

Czasami będziesz chciał uzyskać dostęp do wyników filtrów spoza ng-repeat , być może w celu wskazania liczby elementów, które zostały odfiltrowane. Możesz to zrobić, używając składni as [variablename] w 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>