AngularJS 过滤器使用技巧：10个实用数据格式化方法

AngularJS 过滤器是前端开发中非常有用的工具，能够轻松实现数据格式化和转换。本文将分享10个实用的AngularJS过滤器技巧，帮助你高效处理数据展示问题，提升用户体验！🚀

【免费下载链接】angular.js angular/angular.js: 是 Google 推出的一款 JavaScript 框架，可以方便地实现 Web 应用程序的前端开发。适合对 JavaScript、Web 应用程序和想要实现 Web 应用程序前端开发的开发者。 项目地址: https://gitcode.com/gh_mirrors/an/angular.js

📊 1. 货币格式化过滤器

使用currency过滤器可以轻松将数字转换为货币格式，支持自定义货币符号和位数：

{{ 1234.56 | currency }} → $1,234.56
{{ 1234.56 | currency:'¥':0 }} → ¥1,235

📅 2. 日期格式化技巧

date过滤器支持多种日期格式，从简单到复杂都能处理：

{{ today | date:'yyyy-MM-dd' }} → 2025-11-14
{{ today | date:'fullDate' }} → Thursday, November 14, 2025

🔢 3. 数字精度控制

number过滤器让你精确控制数字的小数位数：

{{ 3.1415926 | number:2 }} → 3.14
{{ 1000 | number }} → 1,000

🔤 4. 大小写转换

快速转换文本大小写，适合用户名显示或标题格式化：

{{ 'hello world' | uppercase }} → HELLO WORLD
{{ 'HELLO WORLD' | lowercase }} → hello world

📋 5. 数据筛选过滤

使用filter过滤器实现实时搜索功能：

<input ng-model="searchText">
<div ng-repeat="item in items | filter:searchText">
  {{ item.name }}
</div>

🔢 6. 限制显示数量

limitTo过滤器控制数组或字符串的显示长度：

{{ 'JavaScript Framework' | limitTo:10 }} → JavaScript
{{ items | limitTo:5 }} <!-- 只显示前5项 -->

📈 7. 数据排序功能

orderBy过滤器实现多字段排序：

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

<!-- 多字段排序 -->
<div ng-repeat="user in users | orderBy:['-age', 'name']">
  {{ user.name }} ({{ user.age }})
</div>

📄 8. JSON数据格式化

调试时使用json过滤器查看完整对象结构：

<pre>{{ userObject | json }}</pre>
<!-- 输出格式化的JSON数据 -->

🎯 9. 过滤器链式调用

组合多个过滤器实现复杂格式化：

{{ product.price | number:2 | currency }}
{{ user.createdAt | date:'short' | uppercase }}

💡 10. 自定义过滤器

创建个性化过滤器满足特定需求：

angular.module('app').filter('reverse', function() {
  return function(input) {
    return input.split('').reverse().join('');
  };
});

{{ 'hello' | reverse }} → olleh

总结

AngularJS 过滤器为数据展示提供了强大的格式化能力，从简单的文本处理到复杂的数据转换都能轻松应对。掌握这些技巧，让你的应用界面更加专业和用户友好！✨

记住：过滤器不仅可以在模板中使用，还可以在控制器和服务中通过$filter服务调用，实现更灵活的数据处理逻辑。

【免费下载链接】angular.js angular/angular.js: 是 Google 推出的一款 JavaScript 框架，可以方便地实现 Web 应用程序的前端开发。适合对 JavaScript、Web 应用程序和想要实现 Web 应用程序前端开发的开发者。 项目地址: https://gitcode.com/gh_mirrors/an/angular.js