AngularJs 过滤器

最新推荐文章于 2021-03-25 09:35:17 发布

__Jun__

最新推荐文章于 2021-03-25 09:35:17 发布

阅读量530

点赞数 1

分类专栏： HTML 文章标签： HTML angularjs javascript filter

本文链接：https://blog.csdn.net/caojengineer/article/details/51086183

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在HTML中模板中绑定符号{{}}中使用|符号来调用过滤器。
比如转换成大写:
{{ name | uppercase }}
{{ name | lowercase }}

JavaScript代码中通过$filter()调用过滤器。

app.controller('DemoController', ['$scope', '$filter',
	function($scope, $filter) {
		$scope.name = $filter('uppercase')('Ari');
}]);

{{ "3456789" | number}}  -> 显示成 3,456,789

限制小数点位数：
{{ 12.321678 | number:2 }} －> 显示成 3,456,789.00


转换成货币格式：
{{ 30.23 | currency:'￥' }}  -> 显示成 ￥30.23



日期格式：
{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 --> 
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }} <!-- Aug 09, 2013 --> 
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM --> 
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

年份格式化
{{ today | date:'yyyy' }} <!-- 2013 -->
{{ today | date:'yy' }} <!-- 13 -->
{{ today | date:'y' }} <!-- 2013 -->

月份格式化
{{ today | date:'MMMM' }} <!-- August -->
{{ today | date:'MMM' }} <!-- Aug -->
{{ today |date:'MM' }} <!-- 08 -->
{{ today |date:'M' }} <!-- 8 -->
       
日期格式化
{{ today|date:'dd' }} <!-- 09 -->
{{ today | date:'d' }} <!-- 9 -->
{{ today | date:'EEEE' }} <!-- Thursday -->
{{ today | date:'EEE' }} <!-- Thu -->

小时格式化
{{today|date:'HH'}} <!--00-->
{{today|date:'H'}} <!--0-->
{{today|date:'hh'}} <!--12-->
{{today|date:'h'}} <!--12-->

分钟格式化 
{{ today | date:'mm' }} <!-- 09 -->
{{ today | date:'m' }} <!-- 9 -->        
{{ today | date:'ss' }} <!-- 02 -->

秒数格式化
{{ today | date:'s' }} <!-- 2 -->
{{ today | date:'.sss' }} <!-- .995 -->

字符格式化
{{ today | date:'a' }} <!-- AM -->
{{ today | date:'Z' }} <!--- 0700 -->

示例：
{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8--> 
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

转换json格式：
{{ {name:'cao', age: 30} | json}}  ->显示成   { "name": "cao", "age": 30 }

个数限制：
<div ng-repeat="u in myArr | limitTo:2">
	<p>Name:{{u.name}}
	<p>Age:{{u.age}}
</div>