angularjs_filter

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

AngularJS Filter 是 AngularJS 提供的一种特殊类型的服务，用于格式化数据，它们通常用于将数据转换为适合显示的格式，例如日期、货币、文本等，在 AngularJS 中，可以使用内置的过滤器，也可以创建自定义过滤器。

## 1. 内置过滤器

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

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

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

`filter`：从数组中选择符合特定条件的子集。

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

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

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

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

## 2. 自定义过滤器

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

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

2. 使用 `module.filter` 创建一个新的过滤器。

3. 为过滤器添加逻辑。

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

“`javascript

// 创建一个新的模块

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

// 创建一个新的过滤器

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

return function(input, filterParameter) {

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

// 返回过滤后的结果

};

});

“`

## 3. 使用过滤器

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

“`html

{{ date | date }}

“`

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

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

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

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

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

“`html

<td>{{ 1234 | currency }}</td> <!结果: $1,234.00 >

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

“`

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

“`html

<td>{{ date | date }}</td> <!结果: 根据默认格式 >

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

“`

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

“`html

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

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

“`

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

“`html

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

“`

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

“`html

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

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

“`

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

“`html

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

“`

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

“`html

<td>{{ 1234.567 | number:2 }}</td> <!结果: 1,234.57 >

“`

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

“`html

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

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

“`

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

“`html

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

“`

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