AngularJS - 内置过滤器

最新推荐文章于 2025-08-05 23:58:52 发布

转载最新推荐文章于 2025-08-05 23:58:52 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mpci/p/11018277.html

文章标签：

#json #javascript #ViewUI

本文详细介绍了AngularJS中各种过滤器的使用方法，包括货币、日期、数组过滤、JSON转换、字符串截取、大小写转换、数字格式化及排序等功能，帮助开发者更好地理解和应用这些过滤器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

currency :

把数值转换为货币格式显示

1 <h1> {{ 123.45 | currency }} </h1> 
2 <!-- $123.45 -->

date :

日期格式化 , 不指定参数 , 默认为 'mediumDate' 格式 , 也可以自己指定格式

1 $scope.today = new Date();

1 <h1> {{ today | date }} </h1>  
2 <!-- Jun 13, 2019 ( 默认 ) -->
3 
4 <h1> {{ today | date : 'yyyy-MM-dd HH:mm:ss' }} </h1>  
5 <!-- 2019-06-13 16:08:21 -->

filter :

过滤给定的数组 , 返回过滤后的新数组 , filter 第一个参数可以是字符串 / 对象 / 函数 , 第二个参数

字符串 : 过滤出包含字符 'a' 的字符串

1 <h1> {{ ['aaa','bbb','ccc','abc'] | filter : 'a' }} </h1>
2 <!-- ["aaa","abc"] -->

对象 : 过滤出年龄为 18 的对象

1 <h1> {{ [{name:'mpc', age: 18}, {name: 'Tom', age: 22}] | filter : {age: 18} }} </h1>
2 <!-- [{"name":"mpc","age":18}] -->

函数 : 对每个元素都执行这个函数 , 会过滤出非假的元素 , 下面代码是过滤出以字母 'a' 开头的元素

1 $scope.ff = function(str) {
2 　　return str[0] == 'a';
3 };

1 <h1> {{ ['aaa','bbb','ccc','abc'] | filter : ff }} </h1>
2 <!-- ["aaa","abc"] -->

json :

可以将一个Json或者是JavaScript对象转换成字符串

1 $scope.person = {
2     name: 'Tom',
3     age: 18
4 };

1 <h1> {{ person | json }} </h1>
2 <!-- { "name": "Tom", "age": 18 } -->

limitTo :

根据传入的参数值的大小 , 截取数组或字符串 , 根据参数的正负值控制从前面还是后面开始截取

1 <h1> {{ 'hello' | limitTo: 2}} </h1>
2 <!-- he -->
3 
4 <h1> {{ ['aaa','bbb','ccc','ddd'] | limitTo: -2}} </h1>
5 <!-- ["ccc","ddd"] -->

lowercase :

将字符串转为小写

1 <h1> {{ 'heLLo' | lowercase}} </h1>
2 <!-- hello -->

uppercase :

将字符串转为大写

1 <h1> {{ 'heLLo' | uppercase}} </h1>
2 <!-- HELLO -->

number :

将数字格式化成文本 , 参数用来控制小数点的位数

1 <h1> {{ 1234567.123 | number: 2}} </h1>
2 <!-- 1,234,567.12 -->

orderBy :

对数组进行排序 , 第一个参数必填 , 可以是函数 / 字符串 / 数组 , 第二个参数写 true , 则为降序 , 默认升序

字符串 : 根据姓名升序排序 / 根据年龄降序排序

1 $scope.personList = [
2     {name: 'BBB', age: 18},
3     {name: 'AAA', age: 25},
4     {name: 'CCC', age: 22}
5 ];

1 <h1> {{ personList | orderBy : 'name'}} </h1>
2 <!-- [{"name":"AAA","age":25},{"name":"BBB","age":18},{"name":"CCC","age":22}] -->
3 
4 <h1> {{ personList | orderBy : 'age' : true}} </h1>
5 <!-- [{"name":"AAA","age":25},{"name":"CCC","age":22},{"name":"BBB","age":18}] -->

函数 : 根据返回的值进行排序 , 下面代码是年龄升序排序

1 $scope.personList = [
2     {name: 'BBB', age: 18},
3     {name: 'AAA', age: 25},
4     {name: 'CCC', age: 22}
5 ];
6 
7 $scope.ageSort = function(obj) {
8     return obj.age;
9 };

1 <h1> {{ personList | orderBy : ageSort}} </h1>
2 <!-- [{"name":"BBB","age":18},{"name":"CCC","age":22},{"name":"AAA","age":25}] -->

数组 : 根据数组第一个元素进行排序 , 如果第一个元素相同 , 再根据第二个元素排序

1 $scope.personList = [
2     {name: 'CCC', age: 18},
3     {name: 'AAA', age: 25},
4     {name: 'BBB', age: 18}
5 ];

1 <h1> {{ personList | orderBy : ['age','name']}} </h1>
2 <!-- [{"name":"BBB","age":18},{"name":"CCC","age":18},{"name":"AAA","age":25}] -->

转载于:https://www.cnblogs.com/mpci/p/11018277.html