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

函数:一个函数,我们可以在其中定义什么将被视为匹配项或不匹配项。


更多示例

示例

使用对象作为过滤器

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


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.