AngularJS Filter（过滤器）用法

AngularJS中的过滤器（Filter）是一种强大的工具，用于处理并格式化数据，以便在视图模板中展示。这些过滤器不仅可以过滤变量的值，还能将数据处理成你所期望的格式。

一、过滤器的简介与基本使用

在AngularJS中，过滤器的主要作用是格式化数据。它的基本原型为 {{ expression | filter }}，其中“|”类似于Linux中的管道模式，表示将前面的表达式结果传递给过滤器进行处理。

在视图模板中使用过滤器

1. 在表达式中应用过滤器：只需要遵循 {{ expression | filter }} 的格式即可。例如，{{ 12 | currency }} 将会输出为 $12.00，currency过滤器将数字格式化为货币形式。

2. 在输出结果中应用过滤器：这是过滤器的叠加使用，即前一个过滤器的输出结果作为后一个过滤器的输入数据源。格式为 {{ expression | filter1 | filter2 | ... }}。

带参数的过滤器

过滤器后面可以跟一个或多个参数，以满足特定的需求。格式为 {{ expression | filter:argument1:argument2:... }}。例如，{{ 1234 | number:2 }} 将会输出为 1,234.00，number过滤器将数字格式化为指定的精度。

二、AngularJS内置过滤器

AngularJS提供了九种内置过滤器，包括currency、date、filter、json、limitTo、uppercase、lowercase、number和orderBy。这些过滤器能满足大部分基本的数据格式化需求。

currency过滤器：将数字格式化为货币格式。

date过滤器：将日期格式化为指定的格式。

filter过滤器：从数组中选择符合特定条件的元素。

json过滤器：将JavaScript对象转换为JSON字符串。

limitTo过滤器：限制数组或字符串的长度。

uppercase和lowercase过滤器：将字符串转换为大写或小写。

number过滤器：将数字格式化为指定精度。

orderBy过滤器：对数组进行排序。

这些过滤器的具体用法在AngularJS的官方文档中有详细的说明。使用过滤器，你可以轻松地在AngularJS应用中处理和展示数据，使得数据的展示更加符合需求。通过合理地使用这些过滤器，你可以创建出功能丰富、交互性强的AngularJS应用。在AngularJS的世界里，过滤器（Filter）扮演着重要的角色。它们犹如文本的魔法师，将普通的数据转换为特定的展示形式。让我们一起深入了解这些过滤器并领略其魅力。

一、货币过滤器（currency filter）

你是否厌倦了处理那些数字格式的难题？AngularJS的货币过滤器能轻松帮你解决。只需一个简单操作，如`{{ amount | currency}}`，你的数字就能瞬间变成货币形式。想象一下，这是多么便捷！

二、字母大小写过滤器（uppercase/lowercase filter）

字母的大小写转换，对于前端开发来说，几乎是家常便饭。而AngularJS的大小写过滤器，更是让这一过程变得轻松有趣。只需轻轻一点，如`{{ "lower cap string" | uppercase }}`，文本就能从小写转为大写。更神奇的是，它还能与输入字段结合，实时将用户输入转换为大写。

三、日期过滤器（date filter）

日期和时间格式转换的复杂性，常常让人头疼。但在AngularJS中，这一切都变得简单可行。通过日期过滤器，如`{{ 1304375948024 | date }}`，你可以轻松将毫秒时间戳转换为熟悉的日期和时间格式。更令人惊喜的是，你还可以自定义格式，如`{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}`。

四、JSON过滤器

处理JSON数据是前端开发中的常态。AngularJS的JSON过滤器能够轻松帮助你展示复杂的JSON对象，如`{{ {foo: "bar", baz: 23} | json }}`，让你一眼就能看清数据的结构。

五、在Controllers、Services和Directives中使用过滤器

过滤器的魅力不仅仅在于其简单的使用方式，更在于其强大的集成能力。你可以在AngularJS的controller、service或directive中直接使用过滤器，只需将依赖的过滤器名字加入到相应的依赖列表中即可。这样，你的代码将更具灵活性，可以根据需要适时调用过滤器。

六、自定义过滤器

AngularJS还允许你编写自己的过滤器。其形式和AngularJS的factory service非常相似，只需返回一个对象或函数即可。自定义过滤器的编写非常简单，只需创建一个带有至少一个参数的函数，然后执行你的业务逻辑代码，最后返回处理后的对象。通过这种方式，你可以根据自己的需求创建无限可能的过滤器，从而极大地扩展AngularJS的功能。

AngularJS的过滤器是一种强大的工具，它们能够简化文本和数据格式的转换，使你的代码更具可读性和可维护性。无论是货币、日期、字母大小写转换，还是JSON处理，甚至是自定义过滤器，都展示了AngularJS过滤器的多样性和实用性。在这个神奇的世界里，你可以轻松实现各种文本转换需求，让前端开发变得更加轻松有趣。