AngularJS filter
过滤器
示例
显示包含字母“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 }}
参数值
值 | 描述 |
---|---|
expression | 从数组中选择项目时使用的表达式。表达式可以是以下类型 字符串:将返回与字符串匹配的数组项。 对象:该对象是在数组中搜索的模式。例如: filter: {"name" : "H", "city": "London"} 将返回名称包含字母“H”且城市包含“London”的数组项。请参见下面的示例。函数:一个函数,它将为每个数组项调用,并且函数返回 true 的项将包含在结果数组中。 |
comparator | 可选。定义比较应该有多严格。该值可以是 true:仅当数组项的值与我们比较的值完全相同,才返回匹配项。 false:如果数组项的值 *包含* 我们比较的内容,则返回匹配项。此比较不区分大小写。这是默认值。 函数:一个函数,我们可以在其中定义什么将被视为匹配项或不匹配项。 |
更多示例
示例
使用对象作为过滤器
<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 过滤器