浅谈Angular4中常用管道
更新时间：2017年09月27日 10:04:36 作者：HaiJing1995
本篇文章主要介绍了Angular4中常用管道，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通常我们需要使用管道实现对数据的格式化，Angular4中的管道和之前有了一些变化，下面说一些常用的管道。
一、大小写转换管道
- uppercase将字符串转换为大写
- lowercase将字符串转换为小写
<p>将字符串转换为大写{{str | uppercase}}</p>
str:string = 'hello'
页面上会显示
将字符串转换为大写HELLO
二、日期管道
date。日期管道符可以接受参数，用来规定输出日期的格式。
<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
today:Date = new Date();
页面上会显示现在的时间是2017年05月08日10时57分53秒
三、小数管道
number管道用来将数字处理为我们需要的小数格式
接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为1
最少小数位数默认为0
最多小数位数默认为3
当小数位数少于规定的{最少小数位数}时，会自动补0
当小数位数多于规定的{最多小数位数}时，会四舍五入
<p>圆周率是{{pi | number:'2.2-4'}}</p>
pi:number = 3.14159;
页面上会显示
圆周率是03.1416
四、货币管道
currency管道用来将数字转换为货币格式
<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>
a:number = 8.2515 b:number = 156.548
页面上将显示
USD8.25
0156.55这里的′USD′是美元UnitedStatesdollar的缩写，当为false时不显示符，当为true时，则显示$符。后面的规定小数位数的参数和上面介绍的一样。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇浅谈angularjs module返回对象的坑(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
本文主要介绍了angular十大常见问题，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
下面小编就为大家带来一篇Angular移动端页面input无法输入的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
我们的接口是单独编写的处理的，在实际的开发项目中，有众多的接口，有些需要登陆凭证，有些不需要。一个一个接口处理不妥，我们是否可以考虑对请求进行拦截封装，感兴趣的可以了解一下2022-04-04
这篇文章主要介绍了angula中使用iframe点击后不执行变更检测问题，本文给大家分享解决方案，通过实例代码给的大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。2021-05-05
本篇文章主要介绍了浅谈angularJS的$watch失效问题的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-08-08
这篇文章主要介绍了Angular开发实践之服务端渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
Ionic + Angular.js实现验证码倒计时功能的方法
验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在Android中的实现方法，下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-06-06
本篇文章主要介绍了Angular企业级开发——MVC之控制器详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论