AngularJS常见过滤器用法实例总结有哪些具体使用场景？

AngularJS作为一款经典的前端JavaScript框架,其数据绑定能力为开发者提供了极大的便利，在数据展示过程中，过滤器（Filter）扮演着至关重要的角色，它们能够对数据进行格式化、筛选和排序，从而在前端视图层呈现更符合用户需求的格式，本文将详细总结AngularJS中常见过滤器的用法实例，帮助开发者更好地掌握这一实用功能。

文本格式化过滤器

文本格式化是过滤器最基础的应用场景,AngularJS提供了多种内置过滤器来处理文本数据。

currency过滤器

该过滤器用于将数值转换为货币格式，支持指定货币符号、小数位数和千位分隔符。

// 默认使用美元符号 {{ 1234.56 | currency }} // 输出: $1,234.56 // 指定人民币符号和小数位数 {{ 1234.56 | currency:"¥":2 }} // 输出: ¥1,234.56

date过滤器

用于格式化日期对象，支持多种预定义格式和自定义格式。

// 预定义格式 {{ today | date:"short" }} // 输出: 12/31/23 {{ today | date:"fullDate" }} // 输出: Sunday, December 31, 2023 // 自定义格式 {{ today | date:"yyyy-MM-dd HH:mm:ss" }} // 输出: 2023-12-31 23:59:59

uppercase/lowercase过滤器

用于转换文本的大小写，非常适用于需要统一显示格式的场景。

{{ "hello world" | uppercase }} // 输出: HELLO WORLD {{ "HELLO WORLD" | lowercase }} // 输出: hello world

limitTo过滤器

用于截取字符串或数组的指定长度，支持从开头或结尾截取。

数值处理过滤器

数值过滤器主要用于对数字进行格式化和计算,提升数据可读性。

number过滤器

将数值格式化为指定小数位数的字符串，支持千位分隔符。

{{ 12345.6789 | number:2 }} // 输出: 12,345.68 {{ 0.567 | number:3 }} // 输出: 0.567

filter过滤器（数值筛选）

虽然filter过滤器主要用于数组筛选，但也可配合数值范围进行数据过滤。

$scope.numbers = [10, 25, 35, 40, 50]; // 筛选大于30的数值 {{ numbers | filter:{ '>': 30 } }} // 结果: [35,40,50]

数组与对象过滤器

这类过滤器主要用于处理数组和对象,实现数据的筛选、排序和分组。

filter过滤器（数组筛选）

这是最常用的过滤器之一，支持字符串匹配、对象属性筛选和自定义函数筛选。

$scope.users = [ {name: 'John', age: 25}, {name: 'Alice', age: 30}, {name: 'Bob', age: 25} ]; // 按姓名筛选 {{ users | filter:'A' }} // 筛选包含A的对象 // 按属性筛选 {{ users | filter:{age: 25} }} // 筛选age为25的对象 // 自定义筛选函数 {{ users | filter:searchByAge }} // searchByAge为自定义函数

orderBy过滤器

用于对数组进行排序，支持按字符串、数值或对象属性排序，并可指定升序或降序。

// 按年龄升序 {{ users | orderBy:'age' }} // 按姓名降序 {{ users | orderBy:'name':true }} // 多字段排序 {{ products | orderBy:['category','-price'] }} // 先按category升序，再按price降序

其他实用过滤器

json过滤器

将JavaScript对象或数组转换为JSON字符串，便于调试或展示。

{{ {name: 'John', age: 25} | json }} // 输出: {"name":"John","age":25}

date过滤器（时间差计算）

结合自定义指令可计算时间差，例如显示”3天前”这样的相对时间。

// 需配合自定义指令实现 {{ postDate | date:'yyyy-MM-dd' }} // 显示绝对时间

过滤器的链式调用与自定义过滤器

AngularJS支持将多个过滤器串联使用,通过管道符（|）连接，形成数据处理链。

{{ " hello world " | trim | uppercase }} // 输出: HELLO WORLD

当内置过滤器无法满足需求时,开发者可以自定义过滤器，自定义过滤器本质上是一个工厂函数，返回一个过滤函数。

app.filter('reverse', function() { return function(input) { return input.split('').reverse().join(''); }; }); // 使用方式 {{ "Angular" | reverse }} // 输出: raggnA

过滤器在模板中的高级用法

过滤器与ng-repeat结合

在循环中动态应用过滤器，实现数据的实时筛选和排序。

<input ng-model="searchText"> <ul> <li ng-repeat="user in users | filter:searchText | orderBy:'age'"> {{ user.name }} - {{ user.age }} </li> </ul>

过滤器参数动态绑定

过滤器的参数可以绑定到作用域变量，实现动态控制。

<select ng-model="sortOrder"> <option value="name">Name</option> <option value="-age">Age (Desc)</option> </select> <div ng-repeat="item in items | orderBy:sortOrder">{{ item }}</div>

性能优化注意事项

虽然过滤器使用方便,但在处理大数据量时需注意性能问题：

1. 避免在ng-repeat中使用复杂计算型过滤器
2. 对静态数据可考虑在控制器中预处理后传递给视图
3. 使用trackBy函数优化ng-repeat与过滤器结合时的渲染性能

通过合理运用AngularJS过滤器,开发者可以显著提升数据处理效率和用户体验，掌握常用过滤器的语法和场景，结合自定义过滤器的扩展能力，能够更好地应对复杂的前端数据展示需求，在实际开发中，建议根据具体业务场景选择合适的过滤器，并注意性能优化，以构建高效、可维护的应用程序。