W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS filter 过滤器



Example

显示包含字母“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 从数组中选择项目时使用的表达式。表达式可以是:

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

对象:对象是在数组中搜索的模式。 示例:{"name" : "H", "city": "London"} 将返回名称包含字母“A”的数组项,其中城市包含单词“London”。 参见下面的例子。

函数:将为每个数组项调用的函数,函数返回true的项将在结果数组中。
comparator 可选。定义比较应该有多严格。值可以是:

true:仅当数组项的值正好与我们进行比较时才返回匹配。

false:如果数组项的值包含我们比较的值,则返回一个匹配项。 这种比较不是敏感的。 这是默认值。

函数:一个函数,我们可以定义什么将被认为是一个匹配。

更多实例

Example

使用对象作为过滤器:

<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>
尝试一下 »

Example

做一个“严格”的比较,它不会返回匹配,除非该值与表达式完全相同:

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