AngularJS自定义过滤器怎么用？经典实例总结看这里！

AngularJS作为一款经典的前端框架，其过滤器（Filter）功能为数据展示提供了灵活的格式化能力，自定义过滤器则进一步扩展了这一功能，允许开发者根据业务需求封装特定的数据处理逻辑，本文将通过多个经典实例，系统总结AngularJS自定义过滤器的用法、场景及最佳实践。

自定义过滤器的基础定义与调用

自定义过滤器通过AngularJS模块的filter方法进行注册，本质上是一个函数，接收输入值并返回处理后的结果,其基本定义语法为：

angular.module('myApp')
  .filter('filterName', function() {
    return function(input, arg1, arg2) {
      // 数据处理逻辑
      return output;
    };
  });

在模板中调用过滤器的语法为{{ expression | filterName:arg1:arg2 }}，也可在JavaScript中通过$filter服务调用：$filter('filterName')(input, arg1, arg2)。

文本处理类过滤器实例

首字母大写过滤器

需求：将字符串中每个单词的首字母转换为大写。
实现代码：

app.filter('capitalize', function() {
  return function(input) {
    if (!input) return '';
    return input.toLowerCase().replace(/(?:^|s)S/g, function(a) {
      return a.toUpperCase();
    });
  };
});

使用示例：

<div>{{ 'hello world' | capitalize }}</div>
<!-- 输出：Hello World -->

文本截取过滤器

需求：截取指定长度的文本，并添加省略号。
实现代码：

app.filter('truncate', function() {
  return function(input, length, suffix) {
    length = length || 10;
    suffix = suffix || '...';
    if (!input) return '';
    return input.length > length ? input.substring(0, length) + suffix : input;
  };
});

使用示例：

<div>{{ '这是一段很长的文本内容' | truncate:8:'...' }}</div>
<!-- 输出：这是一段很... -->

数值格式化类过滤器实例

货币格式化过滤器

需求：根据指定货币符号和精度格式化数值。
实现代码：

app.filter('currencyFormat', function() {
  return function(input, symbol, precision) {
    symbol = symbol || '¥';
    precision = precision || 2;
    return symbol + parseFloat(input || 0).toFixed(precision);
  };
});

使用示例：

<div>{{ 1234.567 | currencyFormat:'$':2 }}</div>
<!-- 输出：$1234.57 -->

数字千分位过滤器

需求：为数字添加千分位分隔符。
实现代码：

app.filter('thousandSeparator', function() {
  return function(input) {
    if (isNaN(input)) return '';
    return input.toString().replace(/B(?=(d{3})+(?!d))/g, ',');
  };
});

使用示例：

<div>{{ 1234567 | thousandSeparator }}</div>
<!-- 输出：1,234,567 -->

数组处理类过滤器实例

数组分组过滤器

需求：根据指定属性将数组对象分组。
实现代码：

app.filter('groupBy', function() {
  return function(collection, property) {
    if (!collection) return {};
    return collection.reduce(function(result, item) {
      const key = item[property];
      if (!result[key]) result[key] = [];
      result[key].push(item);
      return result;
    }, {});
  };
});

使用示例：

$scope.users = [
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 25},
  {name: 'Charlie', age: 30}
];
$scope.groupedUsers = $filter('groupBy')($scope.users, 'age');
// 输出：{25: [{...},{...}], 30: [{...}]}

数组去重过滤器

需求：根据指定属性对数组对象进行去重。
实现代码：

app.filter('unique', function() {
  return function(collection, property) {
    if (!collection) return [];
    const flags = {};
    return collection.filter(function(item) {
      const key = property ? item[property] : item;
      if (flags[key]) return false;
      flags[key] = true;
      return true;
    });
  };
});

使用示例：

<div ng-repeat="user in users | unique:'age'">{{ user.name }}</div>
<!-- 输出不重复年龄的用户 -->

日期处理类过滤器实例

相对时间过滤器

需求：显示相对于当前时间的描述（如”3分钟前”）。
实现代码：

app.filter('relativeTime', function() {
  return function(input) {
    const now = new Date().getTime();
    const date = new Date(input).getTime();
    const diff = (now - date) / 1000;
    if (diff < 60) return Math.floor(diff) + '秒前';
    if (diff < 3600) return Math.floor(diff / 60) + '分钟前';
    if (diff < 86400) return Math.floor(diff / 3600) + '小时前';
    return Math.floor(diff / 86400) + '天前';
  };
});

使用示例：

<div>{{ timestamp | relativeTime }}</div>
<!-- 输出：2小时前 -->

过滤器的高级用法与性能优化

链式调用与参数传递

AngularJS支持过滤器链式调用，如{{ text | uppercase | truncate:10 }}，对于多参数过滤器，通过冒号分隔参数，如{{ value | filter:arg1:arg2 }}。

过滤器的性能优化

• 避免复杂计算：过滤器在每次数据绑定时都会执行,避免在其中放置耗时操作。
• 使用memoization：对于纯函数式过滤器,可添加缓存机制避免重复计算。
• 减少DOM监听：通过$watchCollection代替$watch监听数组变化,减少过滤器执行频率。

过滤器的适用场景对比

常见问题与解决方案

1. 过滤器不生效

   • 检查模块依赖注入是否正确
   • 确认过滤器名称拼写无误
   • 验证数据格式是否符合预期

2. 参数传递失败

   • 参数中包含特殊字符时，需使用单引号包裹：{{ value | filter:'arg:with:colon' }}
   • 对象参数需通过JSON字符串传递，并在过滤器中解析

3. 内存泄漏风险

   • 在控制器销毁时通过$onDestroy事件取消过滤器相关监听
   • 避免在过滤器中创建闭包引用外部作用域变量

AngularJS自定义过滤器通过简洁的声明式语法，实现了数据展示逻辑与业务逻辑的分离，在实际开发中，应根据具体需求选择合适的过滤器类型，注重性能优化和代码复用，对于复杂的数据处理场景，可结合服务（Service）封装核心逻辑，保持过滤器的纯粹性和可维护性，掌握过滤器的经典用法和最佳实践,能够显著提升前端数据展示的灵活性和开发效率。