|
|
AngularJS 过滤器是一种特殊的通过在名字后面添加“Filter”后缀来命名的函数，用于转换数据。它们不会改变原始数据，只会返回一个新的数组或字符串。过滤器可以在控制器、服务、指令和表达式中定义和使用。
AngularJS Filter 是 AngularJS 提供的一种特殊类型的服务，用于格式化数据，它们通常用于将数据转换为适合显示的格式，例如日期、货币、文本等，在 AngularJS 中，可以使用内置的过滤器，也可以创建自定义过滤器。
zbhjilbzs2xxrt1.jpg
（图片来源网络，侵删）
## 1. 内置过滤器
AngularJS 提供了一些内置的过滤器，可以用于处理常见的数据格式和操作，以下是一些常用的内置过滤器：
`currency`：将数字转换为货币格式。
`date`：将日期对象转换为字符串。
`filter`：从数组中选择符合特定条件的子集。
`lowercase`：将文本转换为小写。
`uppercase`：将文本转换为大写。
zbhjl3akhfky2xn.png
（图片来源网络，侵删）
`limitTo`：限制字符串或数组的长度。
`orderBy`：根据某个表达式对数组进行排序。
## 2. 自定义过滤器
如果内置的过滤器不能满足需求，你可以创建自定义过滤器，以下是创建一个自定义过滤器的基本步骤：
1. 使用 `angular.module` 创建一个新的模块或获取现有的模块。
2. 使用 `module.filter` 创建一个新的过滤器。
3. 为过滤器添加逻辑。
zbhj0cbym4rhkha.png
（图片来源网络，侵删）
下面是一个创建自定义过滤器的示例：
“`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]
[td]{{ 1234 | currency:’EUR’ }}[/td]
“`
2、date: 将日期对象转换成特定格式的字符串。
“`html
[td]{{ date | date }}[/td]
[td]{{ date | date:’yyyyMMdd’ }}[/td]
“`
3、filter: 根据指定的条件筛选数组。
“`html
[td]{{ items | filter:{name:’Moby’} }}[/td]
[td]{{ items | filter:searchText }}[/td]
“`
4、json: 将一个对象转换成JSON字符串。
“`html
[td]{{ object | json }}[/td]
“`
5、limitTo: 限制数组或字符串的长度。
“`html
[td]{{ array | limitTo:5 }}[/td]
[td]{{ string | limitTo:10 }}[/td]
“`
6、lowercase: 将字符串转换为小写。
“`html
[td]{{ "HELLO" | lowercase }}[/td]
“`
7、number: 将数字转换为字符串，并可以设置小数点后的位数。
“`html
[td]{{ 1234.567 | number:2 }}[/td]
“`
8、orderBy: 根据某个表达式对数组进行排序。
“`html
[td]{{ items | orderBy:’name’ }}[/td]
[td]{{ items | orderBy:=’age’ }}[/td]
“`
9、uppercase: 将字符串转换为大写。
“`html
[td]{{ "hello" | uppercase }}[/td]
“`
请注意，以上示例假设你已经有一个控制器，其中定义了$scope上的amount,date,items,searchText,object,array, 和string这些变量。 |
|
