angularjs_filter

AngularJS 过(guo)滤器是一种(zhong)特殊的通过在名字后面添加“Filter”后缀来命名的函数，用于(yu)转换数据(ju)。它们不会(hui)改变原始数(shu)据，只(zhi)会(hui)返回一个新的数组或字符串。过滤器可以在控制器、服务(wu)、指令和表达式中(zhong)定义和使用。

AngularJS Filter 是 AngularJS 提供的一种特殊类(lei)型的服务，用于格式化数据，它们通(tong)常用(yong)于将(jiang)数据转换为适合显示的格式，例如日期(qi)、货币、文本等，在 AngularJS 中，可以使用内(nei)置的(de)过滤器，也(ye)可以创建自定义过滤器。（图片来源网络，侵删）

AngularJS 提供了(le)一些内置的(de)过滤器，可以用于处理常见的(de)数(shu)据格式和操作(zuo)，以下是(shi)一些常用的内置过滤器：

`currency`：将数字转换为货币格式。

`date`：将日期对象转换为字符串。

`lowercase`：将文本转(zhuan)换为小写。

`uppercase`：将文本转换为(wei)大写。

（图片来源网络，侵删）

`limitTo`：限制字符串或数组的长度。

`orderBy`：根据某个表达式对数组进行(xing)排序。

## 2. 自定义过滤器

如果(guo)内(nei)置的过滤器不能满足需求，你可以创建自定义过滤器，以下是创建一个自定义过滤器的基本步骤：

1. 使用 `angular.module` 创建一个新的模块或获取现有的模块。

3. 为过滤器添加(jia)逻辑。

（图片来源网络，侵删）

下面是(shi)一个创建自定义过滤器的示例：

var app = angular.module(‘myApp’, []);

// 创建一个新的过滤器

app.filter(‘customFilter’, function() {

return function(input, filterParameter) {

// 在这里添加过滤器的逻辑

// 返回过滤后的结(jie)果(guo)

});

“`

## 3. 使用(yong)过滤器

在 AngularJS 中，可以在表达式中(zhong)使用过滤器，以(yi)下是一个使用过滤器的示例：

“`html

{ { date | date }}

“`

还可以在控制器和指令中应用过滤器，只(zhi)需将过滤器作为函数注入即可。

在AngularJS中，filters 用于转换数据，使得在视图中能以期(qi)望的格式展示，下面我将展示(shi)如何将一些常用的AngularJS过滤器写成介绍的形式。

过滤器名称	描述	语法示(shi)例
currency	将(jiang)数(shu)字转换为货币格式	{ { amount	currency }}
date	将日(ri)期转换为(wei)指定的格式(shi)	{ { date	date: 'mediumDate' }}
filter	从数组中选择符合特定条(tiao)件的元素	{ { items	filter:searchText }}
json	将对象转换为JSON字符串	{ { object	json }}
limitTo	限(xian)制数组或字符串的长度	{ { array	limitTo:10 }}
lowercase	将字符串转换为小写	{ { string	lowercase }}
number	将数(shu)字转换为字符串，并可(ke)选地格式化	{ { number	number:2 }}
orderBy	根据(ju)某个表达式对数组进(jin)行排序	{ { items	orderBy:'name' }}
uppercase	将字符串转换为大(da)写	{ { string	uppercase }}

以下是每个过(guo)滤器的详细描述和如何使用的(de)示例：

1、currency: 将数字转换为货币格式，可以指定(ding)货币符号。

“`html

<td>{ { 1234 | currency:’EUR’ }}</td> <!结果: €1.234,00 >

“`

2、date: 将日期对象转换成特定格式(shi)的字符串。

“`html

<td>{ { date | date:’yyyyMMdd’ }}</td> <!结果: 指定格式 >

“`

3、filter: 根据指定的条件筛选数组。

“`html

<td>{ { items | filter:{ name:’Moby’} }}</td> <!结果: 名字为(wei) Moby 的项 >

<td>{ { items | filter:searchText }}</td> <!结果: 根据搜索文本筛选 >

“`

4、json: 将一个对象转换成JSON字符串。

“`html

<td>{ { object | json }}</td> <!结果: 对象的JSON表示 >

“`

5、limitTo: 限制数组或字符串的长度。

“`html

<td>{ { array | limitTo:5 }}</td> <!结果: 数组的第一个(ge)5个元素 >

<td>{ { string | limitTo:10 }}</td> <!结果: 字符串的前10个字符 >

“`

6、lowercase: 将字符串转换为小写。

“`html

<td>{ { "HELLO" | lowercase }}</td> <!结果: hello >

“`

7、number: 将数字转换为字符串，并可以设置小数点后的位数。

“`html

“`

8、orderBy: 根据某个表达式(shi)对数组进行排序。

“`html

<td>{ { items | orderBy:’name’ }}</td> <!结(jie)果: 根据名字排序的项 >

<td>{ { items | orderBy:=’age’ }}</td> <!结果: 根据年龄降序排序的项 >

“`

9、uppercase: 将字符串转换为大写。

“`html

<td>{ { "hello" | uppercase }}</td> <!结果: HELLO >

“`

请注意，以上示(shi)例假设你已经有一个(ge)控制器，其中定义了$scope上的(de)amount,date,items,searchText,object,array, 和(he)string这(zhe)些变量。