AngularJS filter 过滤器
定义和用法
filter 过滤器允许我们筛选数组，并返回仅包含匹配项的数组。
此过滤器只能用于数组。
语法
{{
arrayexpression | filter : expression :
comparator }}
参数值
| 值 | 描述 |
|---|---|
| expression | 从数组中选择项时使用的表达式。表达式的类型可以是:
String 字符串:将返回与字符串匹配的数组项。 Object 对象: 对象是要在数组中搜索的模式。示例:
filter: {"name" : "H",
"city": "London"} 将返回名称包含字母 "H" 的数组项，其中 city 包含单词 "London"。。见下面的例子。
Function 函数: 将为每个数组项调用的函数，函数返回 true 的项将在结果数组中。 |
| comparator | 可选。定义比较的严格程度。该值可以是: true : 仅当数组项的值与我们比较时，才返回匹配项。 false : 如果数组项的值包含与之比较的内容，则返回匹配项。这种比较不区分大小写。这是默认值。 function : 我们可以定义什么是匹配或不匹配的函数。 |
更多实例
实例
将对象用作过滤器:
<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 教程: Angular Filters
