AngularJs学习第八篇 过滤器filter创建

AngularJS学习笔记系列：第八篇过滤器filter的创建与应用

===============================

一、开篇示例

今天我们将深入AngularJS中的过滤器filter，通过一个简单的demo来展示其强大的功能。

demo概览

我们有一个名为“exampleApp”的AngularJS应用，它主要展示了一系列产品的信息。这些信息通过HTTP服务从本地服务器获取。接下来，我们将通过过滤器对这些数据进行处理并展示在界面上。

二、核心代码

filter.js文件

我们先定义了一个名为“exampleApp”的AngularJS模块，并引入了一个名为“productsUrl”的常量，这个常量存储了获取产品信息的URL。接着，我们定义了一个名为“defaultCtrl”的控制器，该控制器通过$http服务获取产品信息，并将这些信息存储在$scope.products中。这样，我们就可以在视图层访问这些数据了。

HTML部分使用了AngularJS的双向数据绑定和指令ng-repeat来遍历产品列表。在展示数据时，我们使用了几个过滤器来格式化数据：uppercase将产品名称转为大写，currency将价格格式化为货币格式，number将过期日期转换为数字格式。我们用一个json过滤器展示了原始的产品数据。

三、过滤器介绍

过滤器在AngularJS中扮演着非常重要的角色，它们可以对数据进行处理和格式化。过滤器主要分为两类：

1. 对单个数据的过滤：例如上面的uppercase、currency和number等过滤器，它们可以接收一个输入值并返回处理后的值。这些过滤器可以直接在表达式中使用，如{{item.name | uppercase}}。

在Web开发中，我们经常需要处理数据展示的问题。尤其在Angular框架中，使用过滤器（Filter）可以方便地处理数据。让我们深入了解如何自定义过滤器并应用于HTML中。

让我们从一个简单的例子开始。假设我们需要改变文本的大小写形式。我们可以创建一个名为“labelCase”的过滤器。这个过滤器接收一个字符串作为输入值，然后根据是否需要反转字符串的大小写来转换它。这样，我们可以轻松地在HTML模板中引用这个过滤器来改变文本的表现形式。

接下来，我们可以自定义一个集合处理的过滤器，类似于“limitTo”。例如，我们可以创建一个名为“skip”的过滤器来处理数组数据。这个过滤器接收一个数组和一个数字作为参数，然后返回一个新的数组，该数组是原数组中从指定位置开始的所有元素。这在处理大量数据时非常有用，可以帮助我们控制展示的数据量。

让我们来看一下如何在HTML中应用这些过滤器。在Angular的模板中，我们可以使用管道符（|）来应用过滤器。例如，我们可以使用“ng-repeat”指令来遍历一个产品数组，并使用“skip”过滤器来跳过数组中的某些元素。这样，我们可以控制页面上展示的产品数量。

当我们定义过滤器时，可能会遇到这样的情况：我们不想重复定义已经存在的过滤器，而是想利用已经创建的过滤器来创建新的功能。这是完全可行的。我们可以利用Angular的内置服务来创建新的过滤器，这些过滤器可以引用其他已经存在的过滤器。例如，我们可以创建一个名为“take”的过滤器，它使用“skip”过滤器来获取数组中的特定数量的元素。这种函数式编程的方式使得代码更加灵活和可重用。

使用Angular的过滤器功能可以极大地简化数据处理和展示的工作。通过自定义过滤器，我们可以根据自己的需求灵活地处理数据，并在HTML模板中轻松应用这些过滤器来展示数据。这种方式不仅提高了代码的可读性和可维护性，还使得数据处理更加直观和高效。

利用内置的“limitTo”过滤器实现数据筛选

在我们的应用中，有一个强大的工具叫做“limitTo”过滤器，它能够帮助我们轻松地限制数据集的范围。通过调用$filter('limitTo')(skipdata, takecount)，我们可以跳过部分数据并选取特定数量的项目。这里的“limitTo”就是我们的内置过滤器。

这个过滤器的使用非常简单，它接收两个参数：一个是需要跳过的数据数量（skipdata），另一个是需要选取的数据数量（takecount）。这样，我们就能精确地控制显示哪些数据。当我们在模板中使用 ng-repeat 指令时，可以使用这个过滤器来展示特定数量的产品。例如，“”，这里的 limitTo 过滤器会将产品列表限制为指定的数量。

让我们来看看如何使用这个过滤器。我们调用 $filter('skip') 来使用 skip 过滤器。因为这个过滤器返回了一个函数，所以我们可以继续传递更多的参数。这个过程非常简单直观，只需按照规则调用函数即可。过滤器就是这样工作的，非常直观简单。我们调用 cambrian.render('body') 来渲染我们的页面。这样，我们的数据筛选就完成了。整个过程就像魔术一样简单，你只需要点击几下就可以完成数据的筛选和展示。怎么样？是不是很酷？