当前位置：首页 > 主机动态 > 正文

Angularjs中Filters详解，如何自定义与优化使用？

admin
主机动态
2025-11-02
3981

AngularJS 作为一款经典的前端框架，其 Filters（过滤器）功能为数据展示提供了灵活的格式化能力，Filters 主要用于在模板中对数据进行实时转换和格式化，无需在控制器中编写额外的格式化逻辑，从而保持代码的简洁和可维护性，本文将详细介绍 AngularJS 中 Filters 的使用方法、内置过滤器及自定义过滤器的实现。

Filters 的基本使用

AngularJS 中的 Filters 主要通过在模板中使用管道符（）来调用，其基本语法为 {{ expression | filterName : parameter1 : parameter2 ... }}。expression 是需要处理的数据表达式，filterName 是过滤器的名称，parameter 是传递给过滤器的可选参数，Filters 可以串联使用，{{ expression | filter1 | filter2 : param }}，此时数据会依次经过 filter1 和 filter2 的处理。

Filters 不仅可以在模板中直接使用，还可以在控制器、服务或指令中通过 $filter 服务调用，在 JavaScript 代码中使用时，需要依赖载入 $filter 服务，$filter('filterName')(expression, parameter)。

常用内置过滤器

AngularJS 提供了多种内置过滤器，覆盖了文本格式化、数值处理、数组操作等常见场景。

文本格式化过滤器

uppercase/lowercase：将文本转换为大写或小写形式。
示例：{{ 'hello' | uppercase }} 输出 HELLO。
date：格式化日期对象或时间戳。
示例：{{ dateValue | date : 'yyyy-MM-dd HH:mm:ss' }},可自定义输出格式。
number：格式化数值，支持小数位数和千位分隔符。
示例：{{ 12345.678 | number : 2 }} 输出 12,345.68。

数值处理过滤器

currency：将数值转换为货币格式，支持指定货币符号和小数位数。
示例：{{ 1234 | currency : '¥' }} 输出 ¥1,234.00。
limitTo：截取数组或字符串的一部分，可通过参数指定截取长度或起始位置。
示例：{{ [1,2,3,4] | limitTo : 2 }} 输出 [1,2]。

数组操作过滤器

filter：根据条件过滤数组元素，支持对象属性匹配和自定义函数。
示例：{{ [{name: 'Tom', age: 20}, {name: 'Jerry', age: 18}] | filter : {age: '18'} }}，筛选出年龄为 18 的对象。
orderBy：对数组进行排序，支持按字段名或自定义比较函数排序。
示例：{{ array | orderBy : 'age' : true }}，按 age 字段降序排列。

集合操作过滤器

json：将 JavaScript 对象或数组转换为 JSON 字符串，便于调试。
示例：{{ {key: 'value'} | json }} 输出 {"key":"value"}。
slice：截取数组或字符串的子集，类似 JavaScript 的 slice 方法。
示例：{{ 'AngularJS' | slice : 0 : 6 }} 输出 Angular。

自定义 Filters 的实现

当内置过滤器无法满足需求时，可以自定义过滤器，自定义过滤器是一个工厂函数，返回一个过滤函数，接收输入数据作为第一个参数,后续参数为过滤器参数。

Angularjs中Filters详解，如何自定义与优化使用？第1张

自定义过滤器示例

以下是一个自定义过滤器,用于将文本首字母大写：

Angularjs中Filters详解，如何自定义与优化使用？第2张

在模板中使用：{{ 'angularjs' | capitalize }} 输出 Angularjs。

带参数的自定义过滤器

以下是一个自定义过滤器,用于截取文本并添加省略号：

Angularjs中Filters详解，如何自定义与优化使用？第3张

app.filter('ellipsis', function() { return function(input, length) { if (!input) return ''; length = length || 10; return input.length > length ? input.substring(0, length) + '...' : input; }; });

在模板中使用：{{ 'This is a long text' | ellipsis : 5 }} 输出 This i...。