AngularJS
Filter

Ihr erster Filter

Bei Filtern handelt es sich um eine spezielle Art von Funktion, mit der die Art und Weise geändert werden kann, wie etwas auf die Seite gedruckt wird, oder um ein Array oder eine ng-repeat zu filtern. Sie können einen Filter erstellen, indem Sie die app.filter() -Methode aufrufen und einen Namen und eine Funktion übergeben. In den Beispielen unten finden Sie Details zur Syntax.

Erstellen wir zum Beispiel einen Filter, der eine Zeichenfolge in Großbuchstaben ändert (im Wesentlichen ein Wrapper der Javascript-Funktion .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();
    };
}); 

Schauen wir uns das an, was oben passiert.

Zunächst erstellen wir einen Filter namens "toUppercase", der einem Controller ähnelt. app.filter(...) . Dann gibt die Funktion dieses Filters die tatsächliche Filterfunktion zurück. Diese Funktion benötigt ein einzelnes Objekt, das das zu filternde Objekt ist, und sollte die gefilterte Version des Objekts zurückgeben.

Hinweis: In dieser Situation nehmen wir an, dass das Objekt, das an den Filter übergeben wird, eine Zeichenfolge ist, und weiß daher, dass der Filter immer nur für Zeichenfolgen verwendet wird. Eine weitere Verbesserung des Filters könnte jedoch vorgenommen werden, die das Objekt durchläuft (wenn es sich um ein Array handelt) und dann jedes Element, das eine Zeichenfolge ist, in Großbuchstaben setzt.

Jetzt nutzen wir unseren neuen Filter in Aktion. Unser Filter kann auf zwei Arten verwendet werden, entweder in einer Winkelvorlage oder als Javascript-Funktion (als eingespritzter Winkelreferenz).

Javascript

Fügen Sie einfach das angle $filter Objekt in Ihren Controller ein, und rufen Sie dann die Filterfunktion mit ihrem Namen ab.

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

HTML

Verwenden Sie für eine Winkeldirektive das Pipe-Symbol ( | ), gefolgt von dem Filternamen in der Direktive nach der eigentlichen Zeichenfolge. MyController wir beispielsweise an, wir haben einen Controller namens MyController , der als Element einen String namens rawString .

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

Anmerkung des Editors: Angular verfügt über eine Reihe integrierter Filter, einschließlich "Großbuchstaben". Der Filter "toUppercase" ist nur als Demo gedacht, um die Funktionsweise von Filtern zu demonstrieren. Sie müssen jedoch keine eigene Großbuchstabenfunktion erstellen.

Benutzerdefinierter Filter zum Entfernen von Werten

Ein typischer Anwendungsfall für einen Filter ist das Entfernen von Werten aus einem Array. In diesem Beispiel übergeben wir ein Array, entfernen alle darin gefundenen Nullen und geben das Array zurück.

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

Das würde gerne im HTML verwendet

{{listOfItems | removeNulls}}

oder in einem Controller wie

listOfItems = removeNullsFilter(listOfItems);

Benutzerdefinierter Filter zum Formatieren von Werten

Ein weiterer Anwendungsfall für Filter ist das Formatieren eines einzelnen Werts. In diesem Beispiel übergeben wir einen Wert, und es wird ein passender wahrer boolescher Wert zurückgegeben.

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

Welches im HTML würde so verwendet werden:

{{isAvailable | convertToBooleanValue}}

Oder in einem Controller wie:

var available = convertToBooleanValueFilter(isAvailable);

Filter in einem untergeordneten Array ausführen

In diesem Beispiel wurde gezeigt, wie Sie einen Tiefenfilter in einem untergeordneten Array ausführen können, ohne dass ein benutzerdefinierter Filter erforderlich ist.

Regler:

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

Aussicht:

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

Überprüfen Sie die vollständige DEMO .

Verwenden von Filtern in einer Steuerung oder einem Dienst

Durch das Injizieren von $filter kann jeder definierte Filter in Ihrem Angular-Modul in Controllern, Diensten, Anweisungen oder sogar anderen Filtern verwendet werden.

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
}

Zugriff auf eine gefilterte Liste außerhalb einer Wiederholungswiederholung

Gelegentlich möchten Sie auf das Ergebnis Ihrer Filter außerhalb der ng-repeat zugreifen, um beispielsweise die Anzahl der ausgefilterten Elemente anzugeben. Sie können dies as [variablename] -Syntax für das 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>