在 AngularJS 中,过滤器是一种可以对数据进行处理和转换的功能。过滤器可以用来格式化数据、筛选数据、排序数据等操作,使数据在前端页面上展示更加灵活和友好。
内置过滤器
AngularJS 提供了一些内置的过滤器,可以直接在模板中使用。以下是一些常用的内置过滤器:
- currency:格式化货币,例如
{{ price | currency }}
- date:格式化日期,例如
{{ date | date:'yyyy-MM-dd' }}
- filter:筛选数据,例如
ng-repeat="item in items | filter:searchText"
- orderBy:排序数据,例如
ng-repeat="item in items | orderBy:'name'"
- uppercase:转换为大写,例如
{{ text | uppercase }}
- lowercase:转换为小写,例如
{{ text | lowercase }}
自定义过滤器
除了内置过滤器,AngularJS 还允许开发者自定义过滤器来满足特定的需求。自定义过滤器可以通过 filter
方法来注册,然后在模板中使用。
angular.module('myApp', []) .filter('reverse', function() { return function(input) { return input.split('').reverse().join(''); }; });
在上面的例子中,我们定义了一个名为 reverse
的过滤器,用来将输入的字符串进行反转操作。在模板中可以这样使用:
<p>{{ 'hello world' | reverse }}</p>
过滤器链
在 AngularJS 中,可以将多个过滤器串联起来使用,形成过滤器链。过滤器链的执行顺序是从左到右。
<p>{{ price | currency | uppercase }}</p>
在上面的例子中,首先会将 price
格式化为货币,然后将结果转换为大写。
总结
过滤器是 AngularJS 中非常强大和灵活的特性,可以帮助我们对数据进行各种处理和转换。通过内置过滤器和自定义过滤器的结合运用,我们可以实现更加丰富和优雅的数据展示效果。希望本章的内容能够帮助你更好地理解和使用 AngularJS 过滤器。