AngularJS filter实例详解，如何灵活使用filter过滤数据？

AngularJS作为一款经典的前端框架,其内置的filter功能为数据展示提供了灵活的格式化能力，Filter主要用于在模板中对数据进行实时转换和过滤，无需在控制器中编写额外的格式化逻辑，有效实现了视图与逻辑的分离，本文将通过多个实例详解AngularJS中filter的使用方法、常见场景及高级技巧。

基础Filter的使用方法

AngularJS提供了多种内置Filter,涵盖日期、货币、字符串处理等常用场景，在模板中使用Filter的基本语法为{{ expression | filterName: parameter1: parameter2 }}，其中为filter分隔符，filterName为filter名称，冒号后可传递参数。

日期格式化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包含uppercase和lowercase两个简单实用的filter，例如{{ 'hello angular' | uppercase }}会输出”HELLO ANGULAR”，而{{ 'WORLD' | lowercase }}则输出”world”，这两个filter不接收额外参数，直接对字符串进行大小写转换。

内置Filter的高级应用

除基础功能外,AngularJS的内置Filter还支持更复杂的数据处理场景。Filter Filter（数组过滤）是数据表格分页、搜索等功能的核心实现方式，假设有一个商品列表$scope.products = [{name: '苹果', price: 8}, {name: '香蕉', price: 6}]，在模板中使用<div ng-repeat="product in products | filter: {name: '苹'}">可筛选出名称包含”苹”的商品。

数组排序Filter可通过orderBy实现，默认情况下，{{ products | orderBy: 'price' }}会按price属性升序排列，若需降序排列则使用{{ products | orderBy: 'price': true }}，orderBy Filter支持多级排序，如orderBy: ['category', '-price']将先按category升序，再按price降序排列。

数字格式化Filter中的number Filter用于控制小数位数和千分位分隔符，例如{{ 1234567.891 | number: 2 }}会显示为”1,234,567.89″，其中参数2表示保留两位小数，当处理国际化场景时，可结合$locale服务实现不同地区的数字格式化。

自定义Filter的创建与使用

当内置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';
    };
});

模板中可通过<span style="color: {{ status | statusColor }}">{{ status }}</span>动态设置文本颜色。

Filter在实践中的注意事项

使用Filter时需注意性能问题,在ng-repeat中过度使用Filter可能导致性能下降，特别是处理大数据量时，建议将复杂过滤逻辑移至控制器中，通过过滤后的数据数组进行渲染，将<div ng-repeat="item in items | filter: search">改为在控制器中实现过滤逻辑：

$scope.filteredItems = $filter('filter')($scope.items, $scope.search);

Filter的链式调用需注意执行顺序，多个Filter会从左到右依次执行，例如{{ text | uppercase | reverse }}会先转换为大写再反转字符串，而{{ text | reverse | uppercase }}则先反转再转换，结果可能完全不同。

国际化支持是Filter的重要特性，AngularJS的$locale服务内置了多语言支持，通过{{ date | date: 'short' }}会根据浏览器语言自动显示对应的日期格式，若需自定义多语言，可通过$localeProvider配置不同语言的格式化规则。

Filter与响应式数据的结合

Filter在响应式数据更新中表现出色,当数据源发生变化时，Filter会自动重新计算并更新视图，以下是一个带搜索过滤的商品列表示例：

<input type="text" ng-model="searchText" placeholder="搜索商品">
<ul>
    <li ng-repeat="product in products | filter: searchText | orderBy: 'price'">
        {{ product.name }} - ￥{{ product.price | number: 2 }}
    </li>
</ul>

当用户在搜索框输入文本时,列表会实时过滤并排序，无需手动触发更新，这种响应式特性使Filter非常适合构建动态数据展示界面。

通过合理使用AngularJS的Filter功能,开发者可以显著简化模板逻辑，提升代码可维护性，无论是基础的格式化需求，还是复杂的数据处理场景，Filter都能提供简洁高效的解决方案，掌握Filter的使用技巧，是构建优雅AngularJS应用的重要基础。