AngularJS filter 过滤器

实例

显示包含字母 "A" 的项:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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>
<p>仅返回与筛选器匹配的项</p>
</body>
</html>

运行一下

定义与用法

filter filter允许我们筛选一个数组，并返回一个只包含匹配项的数组。

此筛选器只能用于数组。

语法

{{ arrayexpression | filter : expression : comparator }}

参数值

值描述

expression 从数组中选择项时使用的表达式。该表达式可以是:

String: 将返回与字符串匹配的数组项

Object: 对象是要在数组中搜索的模式，示例: filter: {"name" : "H", "city": "London"} 将返回包含字母 "H" 的数组项，其中城市包含单词 "London" 。请参见下面的示例。

Function: 将为每个数组项调用的函数，函数返回 true 的项将在结果数组中。

comparator 可选。定义比较的严格程度。值可以是:

true : 仅当数组项的值正是我们比较的值时，才返回匹配项

false : 如果数组项的值包含与之比较的内容，则返回匹配项。此比较不区分大小写。这是默认值

function : 我们可以定义什么是匹配或不匹配的函数

值	描述
expression	从数组中选择项时使用的表达式。该表达式可以是: String: 将返回与字符串匹配的数组项 Object: 对象是要在数组中搜索的模式，示例: `filter: {"name" : "H", "city": "London"}` 将返回包含字母 "H" 的数组项，其中城市包含单词 "London" 。请参见下面的示例。 Function: 将为每个数组项调用的函数，函数返回 true 的项将在结果数组中。
comparator	可选。定义比较的严格程度。值可以是: true : 仅当数组项的值正是我们比较的值时，才返回匹配项 false : 如果数组项的值包含与之比较的内容，则返回匹配项。此比较不区分大小写。这是默认值 function : 我们可以定义什么是匹配或不匹配的函数

更多实例

实例

将对象用作过滤器:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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" : "Blido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
        {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"}
    ];
});
</script>
<p>如果名称中有一个 "O" ，并且城市是 "London"，则过滤器将给出匹配结果。</p>
</body>
</html>

运行一下

实例

进行 "严格" 比较，除非值与表达式完全相同，否则不会返回匹配:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body>
<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>
<p>过滤器将为一个或多个对象值为 "London" 的数组项提供匹配项。</p>
</body>
</html>

运行一下

AngularJS filter 过滤器

实例

定义与用法

语法

参数值

更多实例

实例

实例

相关页面

分类导航