详解Angular的内置过滤器和自定义过滤器

在实际的开发过程中，很多後端返回给我们的数据都是需要格式化处理的，在angular中为我们内置提供了filter指令，可以很方便的对数据进行处理。首先我们看看在视图中是如何使用过滤器的。

1、currency(货币)格式化

 
{{name | currency:'￥'}}

在name的数据後面使用｜符号表示启用过滤器，如果对linux比较熟悉的话，这块的｜根linux的管道功能。currency可以理解成函数，而'￥'则是函数的参数，如果不传默认为$符号！

2、number(数字)格式化

 
{{name | number:2}}

用来精确浮点数(精确到2位)默认是3位。

3、uppercase , lowercase(大小写)格式化

 
{{name | uppercase}}

uppercase转换成大写，lowercase转换成小写

4、json(数据)格式化

 
{{name | json}}

以json的格式输出到页面中，视图只能使用pre标签才可以识别

5、limitTo(截取)格式化

 
{{name | limitTo : 3}}

截取字符串，数字不行。。。

6、limitTo(截取)格式化

 
{{name | date : 'yyyy-MM-dd hh:mm:ss'}}
　　
{{name | date : 'MM/dd/yyyy @ h:mma'}}

7、orderBy(排序)格式化

 
{{name | orderBy : 'age' : true | json}}

如果排序的值是字母，就按照字母的顺序来排序。如果是数字，从大到小。传入true则为逆向排序。

8、filter(筛选&过滤)格式化

 
{{name | filter : 'l' | json}}

在filter传入'l'，会筛选出blue以及yellow。

{{name | filter : 'yellow' : true | json}}

上面都是在视图中以表达式的形式使用过滤器，下面我们来看看在JS中使用过滤器。

 
{{currency}}
 
{{number}}
 
{{uppercase}}
 
{{json}}
 
{{limitTo}}
 
{{date}}
 
{{orderBy}}
 
{{filter}}

这些都属于内置过滤器，我们还可以用.filter自定义过滤器。

 
{{name | firstUpper : 2}}
 

这里我们自定义了一个首字母大写的方法，例子是在视图中使用的，也可以在JS中使用过滤器。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！