AngularJS过滤器filter用法实例，如何正确使用filter过滤数据？

AngularJS过滤器filter用法实例分析

AngularJS作为一款经典的前端框架，其过滤器（filter）功能为数据展示提供了极大的灵活性，过滤器主要用于格式化、筛选或转换数据，在模板中通过管道符（）调用，本文将详细分析AngularJS过滤器的常见用法，并结合实例说明其实现逻辑与最佳实践。

内置过滤器的基本用法

AngularJS内置了多种常用过滤器，如currency（货币格式）、date（日期格式）、filter（数组筛选）、lowercase/uppercase（大小写转换）等，这些过滤器可直接在模板中使用，语法为{{ expression | filterName:param1:param2 }}。

格式化货币：

<p>价格：{{ 1234.56 | currency:'¥' }}</p>  

输出结果为：价格：¥1,234.56。

日期格式化示例：

<p>日期：{{ '2023-10-01' | date:'yyyy年MM月dd日' }}</p>  

输出结果为：日期：2023年10月01日。

数组与对象的筛选

filter过滤器是处理数组的利器，支持通过函数或对象条件进行筛选，假设有一个商品列表：

$scope.products = [  
  { name: '苹果', category: '水果', price: 8 },  
  { name: '胡萝卜', category: '蔬菜', price: 3 },  
  { name: '香蕉', category: '水果', price: 5 }  
];  

按条件筛选

筛选出所有水果类商品：

<div ng-repeat="product in products | filter:{category:'水果'}">  
  {{ product.name }} - {{ product.price }}元  
</div>  

自定义筛选逻辑

通过函数实现复杂筛选，例如价格大于5元的商品：

<div ng-repeat="product in products | filter:expensive">  
  {{ product.name }} - {{ product.price }}元  
</div>  

$scope.expensive = function(product) {  
  return product.price > 5;  
};  

过滤器的链式调用

AngularJS支持多个过滤器串联使用，通过连续的管道符实现，将用户名转为小写并首字母大写：

<p>{{ username | lowercase | uppercase }}</p>  

若username为"John"，输出结果为"JOHN"。

自定义过滤器

内置过滤器无法满足需求时，可自定义过滤器，通过module.filter()方法创建，例如实现一个首字母大写的过滤器：

app.filter('capitalize', function() {  
  return function(input) {  
    if (input) {  
      return input.charAt(0).toUpperCase() + input.slice(1);  
    }  
    return input;  
  };  
});  

在模板中使用：

<p>{{ name | capitalize }}</p>  

过滤器的性能优化

过滤器在每次数据变化时都会重新计算，若数据量较大可能影响性能，优化建议：

1. 避免复杂计算：将复杂逻辑移至控制器或服务中。
2. 使用track by：在ng-repeat中添加track by减少DOM操作。
3. 缓存结果：对频繁调用的过滤器结果进行缓存。

常见问题与解决方案

过滤器不生效

检查依赖注入是否正确，确保过滤器名称拼写无误。

动态参数传递

若需动态传递参数，可通过函数封装：

<div ng-repeat="item in items | filter:filterByParam(searchText)"></div>  

与$watch的配合

结合$watch监听数据变化并手动触发过滤逻辑，适用于复杂场景。

AngularJS过滤器是数据处理的强大工具，合理使用内置过滤器并掌握自定义方法，能显著提升开发效率，在实际应用中，需注意性能优化与代码可维护性，避免过度依赖模板中的复杂逻辑，通过本文的实例分析，开发者可以更灵活地运用过滤器构建高效、清晰的前端界面。