AngularJS filter filter
Definitie en gebruik
filter Filters laten ons arrays filteren en een array retourneren die alleen overeenkomende items bevat.
Deze filter kan alleen worden gebruikt voor arrays.
Gerelateerde pagina's
AngularJS Handleiding:Angular Filters
Voorbeeld
Voorbeeld 1
Toon items die de letter "A" bevatten:
<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>
Voorbeeld 2
Gebruik objecten 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>
Voorbeeld 3
Voer een "strakke" vergelijking uit, tenzij de waarde volledig identiek is aan de expressie, anders worden geen overeenkomsten geretourneerd:
<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>
Syntax
{{ arrayexpression | filter : expression : comparator }}
Parameters
| Parameters | Beschrijving |
|---|---|
| expression |
Gebruikte expressie voor het selecteren van items uit een array. Het type expressie kan zijn: String: Retourneert arrayitems die overeenkomen met de string. Object: Een object is het patroon dat in de array wordt gezocht. Bijvoorbeeld: filter: {"name" : "H", "city": "London"} retourneert arrayitems met de naam die de letter "H" bevat en de stad die "London" bevat. Zie het bovenstaande voorbeeld. Functie: Een functie die voor elk item in de array wordt aangeroepen en de items die true retourneren, verschijnen in het resultaatarray. Zie het bovenstaande voorbeeld. |
| comparator |
Optioneel. Definieer het strikteheidsniveau van de vergelijking. De waarde kan zijn: true: Retourneert alleen matchitems als de waarde van het item in de array volledig identiek is aan de te vergelijken waarde. false: Retourneert een matchitem als de waarde van het item in de array de te vergelijken waarde bevat. Deze vergelijking onderscheidt niet tussen hoofd- en kleine letters. Dit is de standaardwaarde. Functie: We kunnen een functie definiëren om te bepalen wat als matchend of niet-matchend wordt beschouwd. |
