使用过滤器

Posted 2020-08-16 爆炒小黄鸡

过滤器在数据从作用域传递到指令上时进行转换，但并不改变源数据，这允许在视图中显示时能够灵活地格式化或者转换数据。

AngularJS具有两种类型的内置过滤器：一类是对单个数据进行操作的，另一类是对数据集合进行操作的。

一、过滤单个数据的值

用于单个数据的内置过滤器

currency 对货币值进行格式化，在过滤器名之后添加冒号：，然后添加一个字符串表示想替换成的符号，比如英镑符号。

date 对日期值进行格式化，这个日期可以是字符串，js日期对象或者毫秒数等等。使用这个过滤器时，需要指定过滤器名date，之后跟一个冒号，再然后是一个格式化字符串，由要显示的各个日期成分组成。如data|date:"dd MMM yy"或者 data|date:"shortDate".shortDate是date过滤器的格式字符串，这是date过滤器所支持的常用日期表达式的几个快捷格式之一。快捷格式字符串表见P340.

json 从JS对象创建json字符串,例如data|json。

number 对数字值进行格式化，调整小数位数，根据需要进行四舍五入。应用这个过滤器时，只需使用竖线符号和过滤器名，然后是一个冒号和要显示的小数位数，number过滤器会自动在千分位处插入逗号。data|number:2 保留两位小数

uppercase/lowercase 将字符串格式化为全部大写或者全部小写,例如data|uppercase.

 

本地化过滤器输出

currency、number和date过滤器都支持使用本地化规则对数据进行格式化，规则定义在本地化文件中。

 二、过滤集合

2.1 限制项目数量limitTo

limitTo过滤器可以限制从一个数据对象构成的数组中取出的项目的数量，这在一个仅能容纳一定数量项目的页面中尤为有用。

limitTo过滤器配置为一个整数，例如data|limitTo:5，过滤器会从数组中选出