Angular 教程 - 第 4 部分：理解和实现过滤器

Rahul Rajat Singh

4.81/5 (34投票s)

2015年7月7日

CPOL

7分钟阅读

33593

1005

Angular 中过滤器的基本概念。

下载示例 - 282.4 KB

引言

本文中，我们将探讨 Angular 中的过滤器概念。我们将了解一些内置过滤器，并学习如何在 Angular.js 中创建自定义过滤器。

完整系列链接

背景

有时，我们希望在数据显示到视图之前对其进行后处理。一个例子是，我们可能希望以特定格式格式化特定的 string 值，例如，我们可能从数据库中检索到产品的价格，并希望以当地货币格式显示。或者，我们可能希望对检索到的值应用某种换算率，并显示产品的本地价格。另一个例子是，我们可能希望在显示给用户之前将应用程序的内容翻译成当地语言。或者在最简单的情况下，我们希望在显示给用户之前以特定顺序对检索到的数据进行排序。

Angular 中的过滤器提供了一种出色的方式来对检索到的数据进行后处理，在将其渲染到视图之前进行一些数据操作。过滤器提供了清晰的语法，可以根据我们的需要执行数据操作和格式化，而无需编写太多代码。Angular 中提供了许多内置过滤器，Angular 还允许我们创建自己的自定义过滤器。

本文中，我们将探讨如何在 Angular 中使用过滤器，我们将了解一些内置过滤器的用法，并尝试创建一个自定义过滤器，以了解如何创建自己的过滤器来满足应用程序的需求。

Using the Code

让我们首先了解如何在应用程序中使用过滤器。使用过滤器非常简单。我们只需将要处理的数据通过管道 (|) 传递给过滤器。

{{ myData | filter }}

如果我们要将一些额外的格式化信息作为参数提供给过滤器，我们可以通过在过滤器表达式中使用 : 来实现，如下所示：

{{ myData | filter:'parameter' }}

如果我们要对任何数据应用多个过滤器，那么我们可以使用相同的管道 (|) 符号将这些过滤器表达式一个接一个地链接起来。

{{ myData | filter | yetAnotherFilter }}

现在，为了完全掌握过滤器的工作原理，让我们看一下 Angular 中的一些内置过滤器。

uppercase 和 lowercase

数据后处理最简单的情况也许是更改给定 string 的大小写。Angular 为此提供了两个过滤器：uppercase 和 lowercase。我们只需将数据通过管道传递给这些过滤器，string 就会相应地转换。下图显示了如何在视图中完成此操作。

number

number 过滤器让应用程序知道给定的 string 应该被视为数字。它可以按以下方式使用：

{{ 10 | number }}

如果我们要指定小数位数，可以将其作为参数传递给过滤器。因此，假设我们要查看五位小数，过滤器的用法将如下所示：

{{ quantity | number:5 }}

下图显示了我们如何在视图中使用数字过滤器，其中 quantity 是作用域上定义的变量。

date

Date 过滤器允许我们将任何给定的 string 视为日期，并允许我们控制日期的显示格式。

{{ today | date }}

如果我们要控制显示格式，可以将格式 string 作为参数传递给过滤器。

{{ today | date:'dd, MMMM, yyyy' }}

注意：要查看 date 的各种日期格式说明符，请参阅 Angular 文档。

currency

Currency 过滤器也与 date 和 number 相同。如果我们要指示某个 string 应被视为 currency，我们可以使用此过滤器。

{{ price | currency }}

此外，如果我们要提供自己的 currency 符号，也可以将其作为参数传递给过滤器。

{{ price | currency:'Rs ' }}

limitTo

limitTo 是一个过滤器，可以让我们限制要在视图上渲染的项目数量。如果我们在 string 上使用 limitTo，它将限制将在视图上显示的字符数。

{{ message | limitTo:5}}

如果我们在 ng-repeat 表达式中使用 limitTo 过滤器，它将限制将从该集合中向用户显示的项目数量。因此，如果我们要只显示列表中的两个项目，我们可以按以下方式使用 limitTo 属性：

limitTo 与 ngRepeat 结合使用在视图上实现分页功能时特别有用。

orderBy

orderBy 过滤器可用于根据某些特定条件对数据进行排序。假设我们要按照 ID 顺序显示 books，我们可以将其指定为过滤器形式：

ng-repeat="book in books | orderBy: ID"

如果我们要按 ID 的降序排序，我们可以使用 - 来表示我们希望按降序排序，如下所示：

ng-repeat="book in books | orderBy: -ID"

过滤器 (filter)

filter 是 Angular 中另一个可用的过滤器，可用于从集合中筛选某些项目。它将查看集合的所有字段，并显示包含 filter 参数中存在的 string 的项目。因此，如果我们要显示包含单词“test”的书籍，我们可以通过以下方式进行：

ng-repeat="book in books | filter:'test'"

注意：在示例应用程序中，orderBy、filter 等过滤器的使用是通用化的，并作为用户可选择的值提供。下图显示了它的屏幕截图。请查看示例应用程序，了解如何通过实际使用上述过滤器来完成此操作。

json

json 过滤器可用于查看任何对象的 json 表示。这在我们需要调用期望 json 有效负载的远程服务时非常有用。它还可以用于调试和故障排除目的。因此，假设我们要查看 books 集合的 json 有效负载，我们可以执行以下操作：

 {{ books | json }}

当我们在视图上查看结果时，我们可以看到此 books 集合的 json 有效负载

在控制器和服务中使用过滤器

到目前为止我们看到的 filter 用法是从视图角度来看的。但是，在某些情况下，我们可能希望从 JavaScript 组件（如控制器和服务）中使用过滤器。Angular 也允许我们在组件中使用过滤器，我们可以通过以下方式使用 $filter 调用过滤器：

$scope.allCapsMessage = $filter("uppercase")($scope.message);

如果我们要传递 filter 参数，我们可以将其作为第二个参数传递。例如，如果我们要将数字过滤到小数点后 5 位，我们可以通过以下方式进行：

$scope.conversionRate = $filter("number")(62.3, 5);

创建自定义过滤器

Angular 还允许我们为内置过滤器不足的场景创建自己的自定义过滤器。让我们看看如何在 Angular 中创建自定义过滤器。假设我们要创建一个过滤器，该过滤器将计算给定数字的幂，并带有提供的参数。如果未提供参数，则幂值将取 1。

要创建自定义 filter，我们需要按以下方式在 Angular 模块中注册 filter 定义：

angular.module('myAngularApplication').filter('power', function () {
    
    return function (input, powerValue) {

        // Check if power value is falsy
        if (!powerValue) {
            powerValue = 1;
        }

        // Use Math.pow to find the power and return it
        return Math.pow(input, powerValue);
    }
});

上述代码的作用是创建一个名为 power 的 filter，它将接收一个输入和一个 power 值的参数，并使用 Math.Pow 返回结果。

从使用角度来看，现在这个过滤器可以像任何其他 filter 一样使用。因此 {{ 2 | power }} 将返回 2，而 {{ 2 | power:4 }} 将返回 16。

关注点

在本文中，我们了解了 Angular 中过滤器的基础知识。我们了解了 Angular 中的一些内置过滤器。我们看到了过滤器在进行后期处理和数据操作时是多么强大。我们看到了使用过滤器的各种方法以及如何编写自己的自定义过滤器。本文是从初学者的角度编写的。希望它能提供有益的信息。

历史

2015年7月7日：第一个版本

Angular 教程 - 第 4 部分： 理解和实现过滤器

引言

背景