AngularJS作为一款经典的前端框架,其内置的filter功能为数据展示提供了灵活的格式化能力，Filter主要用于在模板中对数据进行实时转换和过滤，无需在控制器中编写额外的格式化逻辑，有效实现了视图与逻辑的分离，本文将通过多个实例详解AngularJS中filter的使用方法、常见场景及高级技巧。
基础Filter的使用方法
AngularJS提供了多种内置Filter,涵盖日期、货币、字符串处理等常用场景，在模板中使用Filter的基本语法为
{{ expression | filterName: parameter1: parameter2 }}
，其中为filter分隔符，
filterName
为filter名称，冒号后可传递参数。
是开发中最常用的filter之一，假设控制器中定义了
$scope.date = new Date()
，在模板中使用
{{ date | date: 'yyyy-MM-dd HH:mm:ss' }}
可将日期格式化为”年-月-日 时:分:秒”的形式，AngularJS的date Filter支持多种格式化参数，如’short’、’medium’、’long’等预设格式，也允许自定义格式模式。
货币Filter
适用于金额显示场景，当需要显示数值类型的金额时，可通过
{{ 1234.56 | currency: '￥' }}
将数值转换为”￥1,234.56″的格式，currency Filter的第一个参数指定货币符号，第二个参数可控制小数位数，如
{{ 1234.56 | currency: '￥': 0 }}
将显示为”￥1,235″（四舍五入到整数）。
字符串大小写转换Filter
包含和两个简单实用的filter，例如
{{ 'hello angular' | uppercase }}
会输出”HELLO ANGULAR”，而
{{ 'WORLD' | lowercase }}
则输出”world”，这两个filter不接收额外参数，直接对字符串进行大小写转换。
内置Filter的高级应用
除基础功能外,AngularJS的内置Filter还支持更复杂的数据处理场景。
Filter Filter
（数组过滤）是数据表格分页、搜索等功能的核心实现方式，假设有一个商品列表
$scope.products = [{name: '苹果', price: 8}, {name: '香蕉', price: 6}]
，在模板中使用可筛选出名称包含”苹”的商品。
数组排序Filter
可通过实现，默认情况下，
{{ products | orderBy: 'price' }}
会按price属性升序排列，若需降序排列则使用
{{ products | orderBy: 'price': true }}
，orderBy Filter支持多级排序，如
orderBy: ['category', '-price']
将先按category升序，再按price降序排列。
数字格式化Filter
中的Filter用于控制小数位数和千分位分隔符，例如
{{ 1234567.891 | number: 2 }}
会显示为”1,234,567.89″，其中参数2表示保留两位小数，当处理国际化场景时，可结合服务实现不同地区的数字格式化。
自定义Filter的创建与使用
当内置Filter无法满足需求时,可通过模块的方法创建自定义Filter，自定义Filter本质上是一个函数，接收输入值作为参数，返回处理后的结果，以下是一个自定义文本截取Filter的实现示例：
app.filter('truncate', function() {return function(input, length) {if (!input) return '';length = length || 10;return input.length > length ? input.substring(0, length) + '...' : input;};});
在模板中使用时,可通过
{{ '这是一段很长的文本' | truncate: 5 }}
将其截断为”这是一段很…”，自定义Filter支持链式调用，如
{{ text | uppercase | truncate: 8 }}
会先转换为大写再截断文本。
带参数的自定义Filter 能实现更灵活的功能，创建一个根据状态显示不同颜色的Filter：
app.filter('statusColor', function() {return function(status) {var colors = {'success': 'green','warning': 'orange','error': 'red'};return colors[status] || 'gray';};});
模板中可通过
{{ status }}
动态设置文本颜色。
Filter在实践中的注意事项
使用Filter时需注意性能问题,在中过度使用Filter可能导致性能下降，特别是处理大数据量时，建议将复杂过滤逻辑移至控制器中，通过过滤后的数据数组进行渲染，将改为在控制器中实现过滤逻辑：
$scope.filteredItems = $filter('filter')($scope.items, $scope.search);
Filter的链式调用
需注意执行顺序，多个Filter会从左到右依次执行，例如
{{ text | uppercase | reverse }}
会先转换为大写再反转字符串，而
{{ text | reverse | uppercase }}
则先反转再转换，结果可能完全不同。
国际化支持
是Filter的重要特性，AngularJS的服务内置了多语言支持，通过
{{ date | date: 'short' }}
会根据浏览器语言自动显示对应的日期格式，若需自定义多语言，可通过
$localeProvider
配置不同语言的格式化规则。
Filter与响应式数据的结合
Filter在响应式数据更新中表现出色,当数据源发生变化时，Filter会自动重新计算并更新视图，以下是一个带搜索过滤的商品列表示例：
- {{ product.name }} - ￥{{ product.price | number: 2 }}
当用户在搜索框输入文本时,列表会实时过滤并排序，无需手动触发更新，这种响应式特性使Filter非常适合构建动态数据展示界面。
通过合理使用AngularJS的Filter功能,开发者可以显著简化模板逻辑，提升代码可维护性，无论是基础的格式化需求，还是复杂的数据处理场景，Filter都能提供简洁高效的解决方案，掌握Filter的使用技巧，是构建优雅AngularJS应用的重要基础。
发表评论