AngularJS Filter-Filter

AngularJS-Referenzhandbuch

Definition und Verwendung

filter Filter ermöglichen es uns, Arrays zu filtern und nur die Arrays mit Übereinstimmungen zurückzugeben.

Dieser Filter kann nur für Arrays verwendet werden.

Verwandte Seiten

AngularJS-Tutorial:AngularJS-Filter

Beispiel

Beispiel 1

Zeige Elemente, die das Alphabet "A" enthalten:

<div ng-app="myApp" ng-controller="arrCtrl">
<ul>
<li ng-repeat="x in cars | filter : 'A'">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
    $scope.cars = ["Aston Martin", "Audi", "Bentley", "BMW", "Bugatti"];
});
</script>

Probieren Sie es selbst aus

Beispiel 2

Verwenden Sie ein Objekt als Filter:

<div ng-app="myApp" ng-controller="arrCtrl">
<ul>
<li ng-repeat="x in customers | filter : {'name' : 'O', 'city' : 'London'}">
    {{x.name + ", " + x.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"}
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "B's Beverages", "city" : "London"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
        {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"}
    ];
});
</script>

Probieren Sie es selbst aus

Beispiel 3

Durchführung einer "strengen" Vergleichsart, es wird keine Übereinstimmung zurückgegeben, es sei denn, der Wert stimmt mit dem Ausdruck vollständig überein:

<div ng-app="myApp" ng-controller="arrCtrl">
<ul>
<li ng-repeat="x in customers | filter : 'London' : true">
    {{x.name + ", " + x.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
    $scope.customers = [
        {"name" : "London Food", "city" : "London"},
        {"name" : "London Catering", "city" : "London City"},
        {"name" : "London Travel", "city" : "Heathrow, London"}
    ];
});
</script>

Probieren Sie es selbst aus

Grammatik

{{ arrayexpression | filter : expression : comparator }}

Parameter

Parameter Beschreibung
expression

Ausdruck, der bei der Auswahl von Projekten aus einem Array verwendet wird. Der Ausdruckstyp kann sein:

String: Es werden Array-Elemente zurückgegeben, die mit dem String übereinstimmen.

Objekt: Ein Objekt ist das Muster, das im Array gesucht wird. Zum Beispiel: filter: {"name" : "H", "city": "London"} wird Array-Elemente zurückgeben, deren Namen Buchstaben "H" enthalten und die Stadt "London" enthalten. Siehe oben Beispiel.

Funktion: Eine Funktion, die für jedes Array-Element aufgerufen wird, und die Elemente, für die die Funktion true zurückgibt, erscheinen im Ergebnisarray. Beispiel siehe oben.
comparator

Optional. Definiert das Ausmaß der Vergleichsstrenge. Der Wert kann sein:

true: Es wird nur dann eine Übereinstimmung zurückgegeben, wenn der Wert eines Array-Elements mit dem zu vergleichenden Wert vollständig übereinstimmt.

false: Wenn der Wert eines Array-Elements den zu vergleichenden Wert enthält, wird die Übereinstimmung zurückgegeben. Diese Vergleichung ist nicht großbuchstabenabhängig. Dies ist der Standardwert.

Funktion: Wir können eine Funktion definieren, um zu bestimmen, was als Übereinstimmung oder Nichtübereinstimmung betrachtet wird.

AngularJS-Referenzhandbuch