angular过滤器使用的几个小例子

最新推荐文章于 2024-05-02 16:55:13 发布

前端小菜鸡儿

最新推荐文章于 2024-05-02 16:55:13 发布

阅读量202

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/qq_44361433/article/details/89308927

版权

angular 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里是3个测试用的变量

	getDate=new Date();
    testText="I name is AnGulaR";
    money=12.3;

html中

<p>原本的日期：{{getDate}}</p>
<p>过滤后的日期：{{getDate | date:'yyyy-MM-dd hh:mm'}}</p>
<p>原本的文本：{{testText}}</p>
<p>过滤后的文本：{{testText | uppercase}}</p>
<p>过滤后的文本：{{testText | lowercase}}</p>
<p>过滤后的文本：{{testText | slice:6}}</p>
<p>过滤后的文本：{{testText | slice:0:6}}</p>
<p>过滤后的文本：{{testText | slice:-7 | lowercase}}</p>
<p>原本的价格：{{money}}</p>
<p>过滤后的价格：{{money | number:'2.2'}}</p>
<p>过滤后的价格：{{money | number:'2.1-1'}}</p>
<p>原本的价格：{{money | currency:'USD':true}}</p>
<p>原本的价格：{{money | currency:'EUR':true}}</p>

原本的日期：Mon Apr 15 2019 11:34:38 GMT+0800 (中国标准时间)

过滤后的日期：2019-04-15 11:34

原本的文本：I name is AnGulaR

过滤后的文本：I NAME IS ANGULAR

过滤后的文本：i name is angular

过滤后的文本： is AnGulaR

过滤后的文本：I name

过滤后的文本：angular //同样是支持多层过滤使用

原本的价格：12.3

过滤后的价格：12.30

过滤后的价格：12.4  //这里会四舍五入

原本的价格：$12.34

原本的价格：€12.34