AngularJS常见过滤器用法实例总结有哪些具体使用场景

教程大全 2026-02-19 16:13:42 浏览次

angularJS作为一款经典的前端JavaScRIPt框架,其数据绑定能力为开发者提供了极大的便利，在数据展示过程中，过滤器（filter）扮演着至关重要的角色，它们能够对数据进行格式化、筛选和排序，从而在前端视图层呈现更符合用户需求的格式，本文将详细总结AngularJS中常见过滤器的用法实例，帮助开发者更好地掌握这一实用功能。

文本格式化过滤器

文本格式化是过滤器最基础的应用场景,AngularJS提供了多种内置过滤器来处理文本数据。

currency过滤器 该过滤器用于将数值转换为货币格式，支持指定货币符号、小数位数和千位分隔符。

// 默认使用美元符号{{ 1234.56 | currency }} // 输出: $1,234.56// 指定人民币符号和小数位数{{ 1234.56 | currency:"¥":2 }} // 输出: ¥1,234.56

date过滤器 用于格式化日期对象，支持多种预定义格式和自定义格式。

// 预定义格式{{ today | date:"short" }} // 输出: 12/31/23{{ today | date:"fullDate" }} // 输出: Sunday, December 31, 2023// 自定义格式{{ today | date:"yyyy-MM-dd HH:mm:ss" }} // 输出: 2023-12-31 23:59:59

uppercase/lowercase过滤器 用于转换文本的大小写，非常适用于需要统一显示格式的场景。

{{ "hello world" | uppercase }} // 输出: HELLO WORLD{{ "HELLO WORLD" | lowercase }} // 输出: hello world

limitTo过滤器 用于截取字符串或数组的指定长度，支持从开头或结尾截取。

// 截取字符串{{ "AngularJS" | limitTo:3 }} // 输出: Ang// 截取数组[1,2,3,4,5] | limitTo:3 // 结果: [1,2,3]

数值处理过滤器

数值过滤器主要用于对数字进行格式化和计算,提升数据可读性。

number过滤器 将数值格式化为指定小数位数的字符串，支持千位分隔符。

{{ 12345.6789 | number:2 }} // 输出: 12,345.68{{ 0.567 | number:3 }} // 输出: 0.567

filter过滤器（数值筛选） 虽然filter过滤器主要用于数组筛选，但也可配合数值范围进行数据过滤。

$scope.numbers = [10, 25, 35, 40, 50];// 筛选大于30的数值{{ numbers | filter:{ '>': 30 } }} // 结果: [35,40,50]

数组与对象过滤器

这类过滤器主要用于处理数组和对象,实现数据的筛选、排序和分组。

filter过滤器（数组筛选） 这是最常用的过滤器之一，支持字符串匹配、对象属性筛选和自定义函数筛选。

$scope.users = [{Name: 'John', age: 25},{name: 'Alice', age: 30},{name: 'Bob', age: 25}];// 按姓名筛选{{ users | filter:'A' }} // 筛选包含A的对象// 按属性筛选{{ users | filter:{age: 25} }} // 筛选age为25的对象// 自定义筛选函数{{ users | filter:searchByAge }} // searchByAge为自定义函数

orderBy过滤器 用于对数组进行排序，支持按字符串、数值或对象属性排序，并可指定升序或降序。

// 按年龄升序{{ users | orderBy:'age' }}// 按姓名降序{{ users | orderBy:'name':true }}// 多字段排序{{ products | orderBy:['category','-price'] }} // 先按category升序，再按price降序

其他实用过滤器

json过滤器 将JavaScript对象或数组转换为JSON字符串，便于调试或展示。

{{ {name: 'John', age: 25} | json }}// 输出: {"name":"John","age":25}

date过滤器（时间差计算） 结合自定义指令可计算时间差，例如显示”3天前”这样的相对时间。

// 需配合自定义指令实现{{ postDate | date:'yyyy-MM-dd' }} // 显示绝对时间

过滤器的链式调用与自定义过滤器

AngularJS支持将多个过滤器串联使用,通过管道符（|）连接，形成数据处理链。

{{ "hello world" | trim | uppercase }} // 输出: HELLO WORLD

当内置过滤器无法满足需求时,开发者可以自定义过滤器，自定义过滤器本质上是一个工厂函数，返回一个过滤函数。

app.filter('reverse', function() {return function(input) {return input.split('').reverse().join('');};});// 使用方式{{ "Angular" | reverse }} // 输出: raggnA