angularJs 过滤器

一.AngularJs内置过滤器

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

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

结果:

$12.90

@12.90

2.date.

<h1>{{today|date:"medium"}}</h1>
            <h1>{{today|date:"short"}}</h1>
            <h1>{{today|date:"fullDate"}}</h1>
            <h1>{{today|date:"longDate"}}</h1>
            <h1>{{today|date:"mediumDate"}}</h1>
            <h1>{{today|date:"shortDate"}}</h1>
            <h1>{{today|date:"mediumTime"}}</h1>
            <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对象转换成字符串.

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

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

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

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

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

二.filter

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

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

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

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

对象:

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

函数:

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

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

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

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

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

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

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

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

自定义过滤器:

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

var myAppModel=angular.module('myApp.filters',[]);
myAppModel.filter("myUpper",function(){
        return function(value){
           if(value){
                return value[0].toUpperCase()+value.slice(1);
                }
            }
    })