详解Angular的内置过滤器和自定义过滤器【推荐】

前端之家收集整理的这篇文章主要介绍了详解Angular的内置过滤器和自定义过滤器【推荐】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、currency(货币)格式化

{{name | currency:'¥'}}

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

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

{{name | uppercase}}

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

5、limitTo(截取)格式化

{{name | limitTo : 3}}

7、orderBy(排序)格式化

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

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

{{name | filter : 'yellow' : true | json}}
如果像这样再传入true,就必须保证value的完整性,单单的'l'是无法筛选出来的。

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

{{currency}}

{{number}}

{{uppercase}}

{{json}}

{{limitTo}}

{{date}}

{{orderBy}}
{{filter}}

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

{{name | firstUpper : 2}}

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

猜你在找的JavaScript相关文章