菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP How to W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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:如果数组项的值包含我们比较的值,则返回匹配项。此比较不区分大小写。这是默认值。

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 过滤器


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持