AngularJS自定义过滤器实例代码如何写？使用场景有哪些？

AngularJS作为一款经典的前端框架，其过滤器（Filter）功能为数据展示提供了灵活的格式化能力，过滤器主要用于模板中，对数据进行实时转换和格式化，如格式化日期、货币、文本大小写转换等，也可用于自定义业务逻辑处理，本文将详细介绍AngularJS内置过滤器的使用方法,并通过实例展示自定义过滤器的实现过程。

内置过滤器的基本使用

AngularJS提供了多种内置过滤器，通过在模板中使用管道符（）调用，常见内置过滤器包括：

过滤器的语法为 {{ expression | filterName:parameter1:parameter2 }}，支持链式调用，{{ 'hello' | uppercase | reverse }},此时需注意过滤器的执行顺序从左到右。

内置过滤器的进阶用法

部分过滤器支持参数传递，增强灵活性，例如date过滤器可通过第二个参数指定格式：

<p>发布时间：{{ publishTime | date:'yyyy年MM月dd日 HH:mm' }}</p>

filter过滤器可结合对象进行复杂筛选，假设有一个商品列表$scope.products，可通过以下代码筛选价格大于100的商品：

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

过滤器可在控制器中通过$filter服务调用，适用于JavaScript逻辑中的数据处理：

$scope.formattedDate = $filter('date')(new Date(), 'yyyy-MM-dd');

自定义过滤器实现

当内置过滤器无法满足需求时，可自定义过滤器，自定义过滤器通过module.filter()方法注册，本质是一个返回函数的工厂函数，以下通过实例说明：

自定义文本截断过滤器

需求：将超过指定长度的文本替换为省略号。

angular.module('myApp', [])
  .filter('truncate', function() {
    return function(input, length) {
      if (!input) return '';
      length = length || 10; // 默认长度为10
      return input.length > length ? input.substring(0, length) + '...' : input;
    };
  });

在模板中使用：

<p>{{ longText | truncate:15 }}</p>

自定义数组排序过滤器

需求：根据指定属性对数组进行排序。

angular.module('myApp')
  .filter('orderByProperty', function() {
    return function(array, property, reverse) {
      if (!angular.isArray(array)) return array;
      return array.slice().sort(function(a, b) {
        var valueA = a[property];
        var valueB = b[property];
        return reverse ? valueB - valueA : valueA - valueB;
      });
    };
  });

模板调用示例：

<div ng-repeat="item in items | orderByProperty:'age':true">
  {{ item.name }} - {{ item.age }}
</div>

过滤器性能优化注意事项

1. 避免频繁调用：过滤器在每次数据变化时都会重新计算，复杂逻辑应尽量通过控制器或服务处理。
2. 合理使用缓存：对于静态数据，可结合$cacheFactory缓存过滤结果。
3. 链式调用简化：将多个过滤器合并为一个自定义过滤器，减少中间计算步骤。

AngularJS过滤器是数据格式化的重要工具，内置过滤器覆盖了大部分常见场景，而自定义过滤器则提供了无限扩展可能，通过合理使用过滤器，可有效分离数据逻辑与展示逻辑，提升代码的可维护性和可读性，在实际开发中，需结合业务需求选择合适的实现方式，并注意性能优化,以充分发挥过滤器的优势。