angularJs 过滤器

一.AngularJs内置过滤器

1.currency:将一个数值格式化为货币格式.

1 <h1>{{12.9|currency}}</h1>
2 <!--自定义-->
3  <h1>{{12.9|currency:"@"}}</h1>

结果:

$12.90

@12.90

2.date.

1 <h1>{{today|date:"medium"}}</h1>
2             <h1>{{today|date:"short"}}</h1>
3             <h1>{{today|date:"fullDate"}}</h1>
4             <h1>{{today|date:"longDate"}}</h1>
5             <h1>{{today|date:"mediumDate"}}</h1>
6             <h1>{{today|date:"shortDate"}}</h1>
7             <h1>{{today|date:"mediumTime"}}</h1>
8             <h1>{{today|date:"shortTime"}}</h1>

结果:

Aug 13, 2015 9:44:41 PM

8/13/15 9:44 PM

Thursday, August 13, 2015

August 13, 2015

Aug 13, 2015

8/13/15

9:44:41 PM

9:44 PM

..........

太多了 不举了.

json:可以讲一个JSON或javascript对象转换成字符串.

1 <h2>{{{'name':'思思博士',age:25}|json}}</h2>

limitTo:会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取.

1 <h2>{{'思思博士'|limitTo:2}}</h2>==>思思
2 <h2>{{'思思博士'|limitTo:-2}}</h2>==?>博士
3 <h2>{{['a','b','c','d','e']|limitTo:3}}</h2>==>['a','b','c']

lowercase,uppercase:字符串装换成大小写

number:过滤器将数字格式化成文本,第二个参数是用来控制小数后面的位数,如果传入了一个非数字字符,会返回字符串.

二.filter

filter过滤器可以从给定的数组中选择一个子集,并将其生成一个数组返回.

这个过滤器的第一个参数可以是字符串,对象,函数.

字符串:返回数组中包含这个字符串的元素.如果我们想返回不包含该字符串的元素,在参数前面添加"!"符号.

1         <h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:'n'}}</h2>
2             <h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:'!n'}}</h2>

对象:

<!--
ps:下面这个例子我一直都没跑通,有知道的可以告知我一声
-->    
<h2>{{[{'name':'Ari','age':24},{'name':'Ari','age':25}]|filter:{'age':24}}}</h2>

函数:

1 <h2>{{['Ari','Lerner','likes','To','Eat','Pizza']|filter:isCapitalized}}</h2>
2 js代码:
3 $scope.isCapitalized=function(str){
4     return str[0]==str[0].toUpperCase();
5 }
6 结果:
7 ["Ari","Lerner","To","Eat","Pizza"]

 

filter的第二个参数可以使一下三种:

true:用angular.equals(expected,actual)对两个值经行严格比较

1 <h2>{{['gUoyansi','guo','gsi']|filter:'gsi':true}}</h2>
2 结果是:
3 ["gsi"]

 

false:经行不区分大小写的字符串比较.

1 <h2>{{['gUoyansi','guo','gsi']|filter:'u':false}}</h2>
2 结果是:
3 ["gUoyansi","guo"]

 

函数:运行这个函数,如果返回true或真,就接收这个元素.

1 <h2>{{['gUoyansi','guo','gsi']|filter:'u':gys}}</h2>
2 js代码:
3 $scope.gys=function(str){
4         if(str.indexOf('u')>-1){
5             return true;
6         }
7     }

自定义过滤器:

1 <h2>{{'guoyansi'|myUpper}}</h2>

1 var myAppModel=angular.module('myApp.filters',[]);
2 myAppModel.filter("myUpper",function(){
3         return function(value){
4            if(value){
5                 return value[0].toUpperCase() value.slice(1);
6                 }
7             }
8     })