在AngularJS中,过滤器(filter)是一种强大的工具,用于数据转换和格式化。它们能够接收输入数据,根据预设的规则进行处理,并返回处理后的结果。过滤器主要用于改善视图层的数据展示,例如日期格式化、货币转换、数组筛选等。
AngularJS内建了九种过滤器:
1. `currency`:将数字格式化为货币,如默认显示美元符号,可自定义货币符号,如`{{ num | currency : '¥' }}`。
2. `date`:对日期进行格式化,支持多种格式字符串,如`{{ date | date : 'yyyy-MM-dd hh:mm:ss EEEE' }}`,或使用预定义的格式字符串,如`'shortTime'`。
3. `filter`:用于在数组中搜索匹配的子串,可以是基于字符串或对象属性的匹配,例如`{{ items | filter:searchText }}`。
4. `json`:将JavaScript对象转换成JSON格式的字符串,方便在页面上查看,如`{{ object | json }}`。
5. `limitTo`:限制输出的长度,可用于截取字符串或数组,如`{{ str | limitTo:5 }}`或`{{ arr | limitTo:3 }}`。
6. `lowercase`:将字符串转换为小写,如`{{ str | lowercase }}`。
7. `uppercase`:将字符串转换为大写,如`{{ str | uppercase }}`。
8. `number`:将数字格式化为特定精度的字符串,如`{{ num | number:2 }}`保留两位小数。
9. `orderBy`:对数组进行排序,可以指定排序字段及顺序,如`{{ arr | orderBy:'name':true }}`按'name'降序排列。
过滤器有两种使用方式:
1. **模板中使用**:在双大括号`{{ }}`内的表达式后添加`|`分隔符,后面跟着过滤器名和可能的参数,如`{{ expression | filter1:arg1:arg2 }}`。可以串联多个过滤器,如`{{ expression | filter1 | filter2 }}`。
2. **控制器和服务中使用**:通过依赖注入的方式,在控制器或服务中直接调用过滤器。对于内置过滤器,可以直接注入对应的过滤器服务,如`currencyFilter`;对于所有过滤器,可以注入`$filter`服务,然后通过字符串参数调用所需的过滤器,如`$filter('currency')(123534)`。
自定义过滤器是AngularJS的一大优势,允许开发者根据需求创建新的过滤器。自定义过滤器通过`app.filter()`方法注册,接受一个名称和一个函数,函数接收输入并返回处理后的结果。例如:
```javascript
app.filter('myCustomFilter', function() {
return function(input, arg1, arg2) {
// 输入处理逻辑
// ...
return processedOutput;
};
});
```
然后在模板或代码中,可以像使用内置过滤器一样使用自定义过滤器。
总结,AngularJS的过滤器是数据绑定的重要组成部分,提供了丰富的数据处理功能。熟练掌握过滤器的使用,可以显著提升应用的用户体验和开发效率。无论是内置过滤器还是自定义过滤器,都能在数据展示和格式化方面发挥重要作用。