AngularJS - 过滤器
过滤器,也就是展示数据之前对其过滤一番。
AngularJS提供了一些常用的过滤器,而且支持自定义过滤器。
在{{}}
内通过|
来调用filter,例如:
{{ 2015 | number:2 }}
其中number
就是filter的名称,:
后接参数。
内置filter
下面列出常用的内置过滤器。
-
number
以数字格式输出,第二个为可选参数,表示小数点后保留的位数。 包含非数字字符时使用使用可选参数会出现Syntax Error,不使用则输出空字符。{{ 1234.12 | number:3}} <!-- 1234.12 --> {{ 1234.12 | number}} <!-- 1,234.12 -->
-
currency
以货币格式输出,包括非数字字符时出现Syntax Error。{{ 1234.12 | currency }} <!-- $1,234.12 -->
-
lowercase/uppercase
将字符转小写/大写{{ "Kavlez! 2015;" | lowercase }} <!-- kavlez! 2015; --> {{ "Kavlez! 2015;" | uppercase }} <!-- KAVLEZ! 2015; -->
-
json
将对象转为json字符串
例如已有声明如下:$scope.person = new Object(); $scope.person.firstname = ‘Kavlez‘; $scope.person.lastname = ‘Jin‘
json过滤输出:
{{ person | json}} <!-- { "firstname": "Kavlez", "lastname": "Jin" } -->
-
limitTo
对字符串或数组进行截取{{ ‘Kavlez!!!!‘ | limitTo:6 }} <!-- Kavlez --> {{ ‘Kavlez!!!!‘ | limitTo:-4 }} <!-- !!!! --> {{ [‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘] | limitTo:1 }} <!-- ["0"]-->
-
orderBy
对数组进行排序,该filter有两个参数,分别是排序依据和正逆序(可选){{ [ {‘alphabet‘: ‘K‘}, {‘alphabet‘: ‘A‘}, {‘alphabet‘: ‘V‘}, {‘alphabet‘: ‘L‘}, {‘alphabet‘: ‘E‘}, {‘alphabet‘: ‘Z‘}] | orderBy:‘alphabet‘:true }} <!-- [{"alphabet":"Z"},{"alphabet":"V"},{"alphabet":"L"},{"alphabet":"K"},{"alphabet":"E"},{"alphabet":"A"}] -->
-
filter
从数组中返回指定子集-
对象
{{ [{‘firstname‘:‘Kavlez‘,‘lastname‘:‘Jin‘}, {‘firstname‘:‘Ken‘,‘lastname‘:‘Jin‘}] | filter:{‘firstname‘: ‘n‘} }} <!-- [{"firstname":"Ken","lastname":"Jin"}] -->
-
字符串
{{ [‘K‘,‘a‘,‘v‘,‘l‘,‘e‘,‘z‘] | filter:‘e‘ }} <!-- ["e"] -->
-
-
date
以指定格式显示时间。
首先$scope.today=new Date();
试试
<br>{{ today | date:‘medium‘ }}<!-- Jan 24, 2015 5:36:38 PM --> <br>{{ today | date:‘short‘ }}<!-- 1/24/15 5:36 PM --> <br>{{ today | date:‘fullDate‘ }}<!-- Saturday, January 24, 2015 --> <br>{{ today | date:‘longDate‘ }}<!-- January 24, 2015 --> <br>{{ today | date:‘mediumDate‘ }}<!-- Jan 24, 2015 --> <br>{{ today | date:‘shortDate‘ }}<!-- 1/24/15 --> <br>{{ today | date:‘mediumTime‘ }}<!-- 5:36:38 PM --> <br>{{ today | date:‘shortTime‘ }}<!-- 5:36 PM --> <br>{{ today | date:‘yyyy‘ }}<!-- 2015 --> <br>{{ today | date:‘yy‘ }}<!-- 15 --> <br>{{ today | date:‘y‘ }}<!-- 2015 --> <br>{{ today | date:‘MMMM‘ }}<!-- January --> <br>{{ today | date:‘MMM‘ }}<!-- Jan --> <br>{{ today | date:‘MM‘ }}<!-- 01 --> <br>{{ today | date:‘M‘ }}<!-- 1 --> <br>{{ today | date:‘dd‘ }}<!-- 24 --> <br>{{ today | date:‘d‘ }}<!-- 24 --> <br>{{ today | date:‘EEEE‘ }}<!-- Saturday --> <br>{{ today | date:‘EEE‘ }}<!-- Sat --> <br>{{ today | date:‘HH‘}} <!-- 17 --> <br>{{ today | date:‘H‘}} <!-- 17 --> <br>{{ today | date:‘hh‘}} <!-- 05 --> <br>{{ today | date:‘h‘}} <!-- 5 --> <br>{{ today | date:‘mm‘ }}<!-- 36 --> <br>{{ today | date:‘m‘ }}<!-- 36 --> <br>{{ today | date:‘ss‘ }}<!-- 38 --> <br>{{ today | date:‘s‘ }}<!-- 38 --> <br>{{ today | date:‘.sss‘ }}<!-- .628 --> <br>{{ today | date:‘a‘ }}<!-- PM --> <br>{{ today | date:‘Z‘ }}<!-- +0800 --> <br>{{ today | date:‘MMMd, y‘ }}<!-- Jan24, 2015 --> <br>{{ today | date:‘EEEE, d, M‘ }} <!-- Saturday, 24, 1 --> <br>{{ today | date:‘hh:mm:ss.sss‘ }}<!-- 05:36:38.628 --> <br>{{ today | date:‘medium‘ }}<!-- Jan 24, 2015 5:36:38 PM --> <br>{{ today | date:‘short‘ }}<!-- 1/24/15 5:36 PM --> <br>{{ today | date:‘fullDate‘ }}<!-- Saturday, January 24, 2015 --> <br>{{ today | date:‘longDate‘ }}<!-- January 24, 2015 --> <br>{{ today | date:‘mediumDate‘ }}<!-- Jan 24, 2015 --> <br>{{ today | date:‘shortDate‘ }}<!-- 1/24/15 --> <br>{{ today | date:‘mediumTime‘ }}<!-- 5:36:38 PM --> <br>{{ today | date:‘shortTime‘ }}<!-- 5:36 PM --> <br>{{ today | date:‘yyyy‘ }}<!-- 2015 --> <br>{{ today | date:‘yy‘ }}<!-- 15 --> <br>{{ today | date:‘y‘ }}<!-- 2015 --> <br>{{ today | date:‘MMMM‘ }}<!-- January --> <br>{{ today | date:‘MMM‘ }}<!-- Jan --> <br>{{ today | date:‘MM‘ }}<!-- 01 --> <br>{{ today | date:‘M‘ }}<!-- 1 --> <br>{{ today | date:‘dd‘ }}<!-- 24 --> <br>{{ today | date:‘d‘ }}<!-- 24 --> <br>{{ today | date:‘EEEE‘ }}<!-- Saturday --> <br>{{ today | date:‘EEE‘ }}<!-- Sat --> <br>{{ today | date:‘HH‘}} <!-- 17 --> <br>{{ today | date:‘H‘}} <!-- 17 --> <br>{{ today | date:‘hh‘}} <!-- 05 --> <br>{{ today | date:‘h‘}} <!-- 5 --> <br>{{ today | date:‘mm‘ }}<!-- 36 --> <br>{{ today | date:‘m‘ }}<!-- 36 --> <br>{{ today | date:‘ss‘ }}<!-- 38 --> <br>{{ today | date:‘s‘ }}<!-- 38 --> <br>{{ today | date:‘.sss‘ }}<!-- .628 --> <br>{{ today | date:‘a‘ }}<!-- PM --> <br>{{ today | date:‘Z‘ }}<!-- +0800 --> <br>{{ today | date:‘MMMd, y‘ }}<!-- Jan24, 2015 --> <br>{{ today | date:‘EEEE, d, M‘ }} <!-- Saturday, 24, 1 --> <br>{{ today | date:‘hh:mm:ss.sss‘ }}<!-- 05:36:38.628 -->
自定义filter
当然,AngularJS也支持自己义过滤器。
如Controller那样,filter也最好不要全局满天飞,我们需要定义在一个module里面。
这里写一个简单的例子:
var myApp = angular.module("myApp",[])
.filter(‘kavlezFilter‘,function(){
return function(input){
if(input){
return ‘Kavlez:\"‘+input+‘"‘;
}
}
});
使用该filter:
{{ ‘Any time, Any where, Whoever or whatever you are, just bring it on‘|kavlezFilter }}
输出:
Kavlez:"Any time, Any where, Whoever or whatever you are, just bring it on"as
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。