最新的Web开发教程
 

AngularJS过滤器过滤器


显示包含字母“A”的项目:

<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>
试一试»

定义和用法

filter过滤使我们能够过滤一个数组,并且仅返回包含匹配项的数组。

该过滤器仅可用于阵列。


句法

{{ arrayexpression | filter : expression : comparator }}

参数值

Value Description
expression The expression used when selecting items from the array. The expression can be of type:

String: The array items that match the string will be returned.

Object: The object is a pattern to search for in the array. Example: {"name" : "H", "city": "London"} will return the array items with a name containing the letter "A", where the city contains the word "London". See example below.

Function: A function which will be called for each array item, and items where the function returns true will be in the result array.
comparator Optional. Defines how strict the comparison should be. The value can be:

true : Returns a match only if the value of the array item is exactly what we compare it with.

false : Returns a match if the value of the array item contains what we compare it with. This comparison is not case sensitiv. This is the default value.

function : A function where we can define what will be considered a match or not.

更多示例

使用对象作为过滤器:

<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>
试一试»

做一个“严”相比较而言,除非该值是完全一样的表达不返回匹配:

<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>
试一试»

相关页面

AngularJS教程: 角过滤器