异常教程

AngularJS 过滤器（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 AngularJS 开发中，AngularJS 过滤器（AngularJS Filters）是处理数据展示的核心工具之一。它如同一个“数据加工车间”，能将原始数据按照特定规则转换为用户友好的格式。无论是日期格式化、数组排序，还是字符串截取，过滤器都能让开发者以简洁的方式实现复杂的数据操作。对于编程初学者，掌握过滤器能快速提升开发效率；对于中级开发者，深入理解其原理与应用场景则能优化代码结构。本文将通过循序渐进的讲解，结合实际案例，带读者全面了解 AngularJS 过滤器 的使用与扩展。

一、什么是 AngularJS 过滤器？

AngularJS 过滤器 是一种用于转换数据的函数。它接收原始数据作为输入，经过特定逻辑处理后，返回格式化后的数据。在 AngularJS 中，过滤器通常通过 | 符号在模板中调用，例如：

{{ 数据 | 过滤器名称:参数 }}

例如，将数字 1500 格式化为货币形式：

{{ 1500 | currency }} <!-- 输出：$1,500.00 -->

过滤器可以链式调用，例如先过滤再排序：

{{ [3, 1, 2] | filter:2 | orderBy }} <!-- 输出：1, 2, 3 -->

过滤器的核心作用

  1. 数据格式化：如日期、货币、数字的标准化展示。
  2. 数据筛选：根据条件过滤数组或对象。
  3. 数据转换：如字符串大小写转换、JSON 格式化等。

二、内置过滤器的实战应用

AngularJS 提供了多个内置过滤器，覆盖常见场景。以下通过案例详细讲解几个核心过滤器。

1. filter：数据筛选

filter 过滤器用于从数组或对象中筛选符合条件的数据。例如，从用户列表中筛选出姓“张”的用户：

// 控制器  
$scope.users = [  
  { name: "张三", age: 25 },  
  { name: "李四", age: 30 },  
  { name: "张五", age: 28 }  
];  

<!-- 模板 -->  
<ul>  
  <li ng-repeat="user in users | filter: { name: '张' }">  
    {{ user.name }} ({{ user.age }}岁)  
  </li>  
</ul>

输出结果：

  • 张三 (25岁)
  • 张五 (28岁)

比喻：filter 过滤器就像一个“筛子”，根据设定的条件过滤掉不符合的数据，仅保留所需内容。

2. orderBy：数组排序

orderBy 可对数组进行升序或降序排序。例如，按年龄降序排列用户列表：

<li ng-repeat="user in users | orderBy: '-age'">  
  {{ user.name }} ({{ user.age }}岁)  
</li>

输出结果：

  • 李四 (30岁)
  • 张五 (28岁)
  • 张三 (25岁)

参数说明：

  • orderBy: 'age'：升序。
  • orderBy: '-age'：降序。

3. limitTo：限制输出数量

limitTo 可截取数组或字符串的指定部分。例如，显示前 2 个用户：

<li ng-repeat="user in users | limitTo:2">  
  {{ user.name }} ({{ user.age }}岁)  
</li>

输出结果：

  • 张三 (25岁)
  • 李四 (30岁)

动态控制：通过绑定变量，可动态调整截取数量：

<input type="number" ng-model="limitNum">  
<li ng-repeat="user in users | limitTo:limitNum">...</li>

三、自定义过滤器：扩展你的数据处理能力

当内置过滤器无法满足需求时，开发者可通过 module.filter() 方法创建自定义过滤器。例如，实现一个将字符串反转的过滤器：

步骤 1：定义过滤器

// 定义模块  
var app = angular.module('myApp', []);  

// 创建过滤器  
app.filter('reverseString', function() {  
  return function(input) {  
    return input.split('').reverse().join('');  
  };  
});

步骤 2：模板中调用

<p>原始文本：{{ 'Hello World' }}</p>  
<p>反转后：{{ 'Hello World' | reverseString }}</p>

输出结果：

  • 原始文本：Hello World
  • 反转后：dlroW olleH

扩展技巧：

  • 参数支持：通过第二个参数传递配置选项，例如： 
    app.filter('highlight', function() {  
  return function(text, keyword) {  
    return text.replace(new RegExp(keyword, 'gi'), '<span class="highlight">$&</span>');  
  };  
});

    调用时：

    {{ 'AngularJS 是一个框架' | highlight:'框架' }}
  • 依赖注入：过滤器可依赖 AngularJS 服务，例如结合 $filter 使用内置过滤器： 
    app.filter('customFilter', function($filter) {  
  return function(input) {  
    return $filter('uppercase')(input); // 调用内置的 uppercase 过滤器  
  };  
});

四、进阶用法与最佳实践

1. 过滤器的链式调用

多个过滤器可串联使用，例如先过滤再排序：

{{ users | filter: { active: true } | orderBy: '-score' }}

2. 参数传递与动态配置

过滤器支持传递参数，例如 date 过滤器设置日期格式：

{{ date_expression | date:'yyyy-MM-dd' }}

参数可动态绑定变量，如：

<input type="text" ng-model="dateFormat">  
<p>{{ date_expression | date:dateFormat }}</p>

3. 性能优化与注意事项

  • 避免在复杂计算中使用过滤器：过滤器在模板中会频繁触发，避免在高负载场景（如 ng-repeat 内部）使用复杂逻辑的过滤器。
  • 优先使用控制器逻辑处理数据：对于需要频繁计算或复杂的数据转换，建议在控制器中预处理数据，而非依赖过滤器。
  • 自定义过滤器的命名规范：使用有意义的名称，如 priceFormat、userNameFilter，避免与内置过滤器冲突。

五、常见问题与解决方案

Q1：为什么过滤器返回 undefined？

  • 可能原因：输入数据未正确绑定，或过滤器逻辑存在错误。
  • 解决方法：检查输入数据是否存在，使用 ng-init 或 ng-model 初始化变量。

Q2：如何调试自定义过滤器？

  • 在过滤器函数中添加 console.log，或使用 AngularJS 的 $log 服务输出调试信息。

Q3：过滤器能否修改原始数据？

  • 不能。过滤器仅返回处理后的副本，原始数据不会被修改。

结论

AngularJS 过滤器 是提升数据展示效率的利器。从基础的 filter、orderBy，到自定义过滤器的扩展，开发者可通过灵活组合与优化，实现复杂的数据处理需求。对于初学者，建议先掌握内置过滤器的使用场景；对于中级开发者，则需深入理解其性能特点与最佳实践，避免潜在问题。通过本文的案例与代码示例，希望读者能快速上手并熟练运用 AngularJS 过滤器，为项目开发注入更多灵活性与可维护性。

（全文约 1680 字）

最新发布

查看更多文章