上一节:
下一节:

  AngularJS filter 过滤器

  • 定义和用法

    filter 过滤器使我们可以过滤数组，并返回仅包含匹配项的数组。
    注意：该过滤器只能用于数组。

  • 语法

    {{ arrayexpression | filter : expression : comparator }}

  • 参数

    参数 必需的 描述
    expression 是
    从数组中选择项目时使用的表达式。 表达式的类型可以是：
    String：将返回与字符串匹配的数组项。
    Object：对象是要在数组中搜索的模式。 示例：filter：{"name" : "小", "city" : "北京"}将返回名称包含字母 “小” 的数组项，其中city包含单词“北京”。 请参见下面的示例。
    Function：将为每个数组项调用的函数，并且该函数返回true的项将位于结果数组中。
    comparator 否
    定义比较的严格程度。该值可以是：
    true：仅当数组项的值正是我们与之比较的值时才返回匹配项。
    false：如果数组项的值包含我们与之比较的值，则返回匹配项。此比较不区分大小写。这是默认值。
    function：一个函数，我们可以定义是否将其视为匹配项。

  • 示例

    下例演示了使用对象作为过滤器： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<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" : "小红", "city" : "北京"},
                {"name" : "小明", "city" : "北京"},
                {"name" : "Bólido 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>如果名称中有“小”且城市是“北京”，则过滤器将给出匹配项。</p>
</body>
</html>
    尝试一下

  • 相关页面

返回 AngularJS 参考手册
上一节:
下一节: