在AngularJS框架中，过滤器（Filter）是一种非常有用的功能，它可以在视图中显示数据时，按照特定的格式对数据进行格式化。过滤器可以应用在HTML模板中的插值表达式、数据绑定、指令、控制器的$watch表达式、路由服务中的路由规则、服务函数等位置。AngularJS本身内置了一些过滤器，如currency、uppercase、lowercase、filter等，同时还支持开发者根据需要自定义过滤器。
### 过滤器的基本使用方法
AngularJS中过滤器的使用分为两种，一种是在HTML中直接使用过滤器，另外一种是在JavaScript代码中使用。
在HTML模板中使用过滤器：
```html
{{ expression | filterName:parameter }}
```
在JavaScript代码中使用过滤器：
```javascript
$filter('filterName')(input, [parameter]);
```
### 内置过滤器的使用实例
以下是一些内置过滤器在HTML中的使用实例，这些实例展示了不同的内置过滤器对数据格式化的具体作用。
- currency：用于货币格式化，可以指定货币符号。
```html
{{ money | currency }} <!-- 默认使用美元符号 -->
{{ money | currency: '￥' }} <!-- 使用人民币符号 -->
```
- uppercase：将文本转换为大写。
```html
{{ str | uppercase }}
```
- json：用于格式化JSON数据，方便阅读。
```html
{{ json | json }}
```
- number：用于数字格式化，可指定小数点后保留的位数。
```html
{{ num | number:3 }}
```
- date：用于日期格式化。
```html
{{ currentTime | date:'yyyy-MM-dd-hh' }}
```
- limitTo：用于字符串或数组的截取，正数从开头截取，负数从结尾截取。
```html
{{ strr | limitTo:3 }}
{{ strr | limitTo:-3 }}
```
- orderBy：用于数组排序，可以按照指定的属性进行排序。
```html
<li ng-repeat="person in arr | orderBy:'age':false">
```
- filter：用于数组的筛选，根据属性值进行过滤。
```html
<input type="text" ng-model="name"/>
<li ng-repeat="person in arr | filter:{'name': name}">
```
### 自定义过滤器的步骤
自定义过滤器的步骤包括定义过滤器、注册过滤器以及在需要的地方调用过滤器。
- 定义过滤器：使用`angular.module()`创建模块并注册过滤器。
- 注册过滤器：通过`filter()`方法注册过滤器。
- 调用过滤器：在HTML模板中通过`|`符号调用过滤器，或在JavaScript代码中使用`$filter()`函数调用。
自定义过滤器的代码示例：
```javascript
var myApp = angular.module('fristApp', []);
// 定义并注册过滤器
myApp.filter('customFilter', function() {
return function(input, condition) {
// 自定义过滤逻辑
return input.filter(function(item) {
// 这里假设每个item都有一个符合过滤条件的属性
return item[condition] === true;
});
};
});
// 在控制器中调用自定义过滤器
myApp.controller('fristController', function($scope, $filter) {
// 使用自定义过滤器
$scope.filteredItems = $filter('customFilter')($scope.arr, 'age', 30);
console.log($scope.filteredItems);
});
```
### 注意事项
在使用过滤器时，需要注意以下几点：
- HTML中过滤器的使用，可以通过`|`符号与变量表达式结合来实现数据的格式化。
- 在JavaScript代码中，使用`$filter`服务来调用过滤器时，需要确保过滤器已经被注册到相应的模块中。
- 自定义过滤器时，要定义好过滤逻辑，并确保传入过滤器的参数是正确的。
- 在定义过滤逻辑时，可能需要考虑数据类型、性能优化等因素。
通过上述内容，我们可以看到AngularJS中的过滤器使用起来非常灵活，不仅能够处理常见的数据格式化需求，还可以通过自定义过滤器来满足特定的业务逻辑处理。这无疑给AngularJS开发人员提供了极大的便利，使得数据在显示之前可以更符合实际业务场景的需要。
