最近参加笔试被虐成狗了，感觉自己的算法太弱了。但是还是先花点事件将这个AngularJS学习完。今天学习filter

一、内置过滤器

　　（1）过滤单个数据值

　　

    
             
今天是：{
   {now|date:"dd MMMM yyyy"}}
    
     
              
       
                    
name
                    
cat
                    
price
                    
expiry
                    
json
               
               
                    
{
   {item.name}}
                    
{
   {item.cat | uppercase}}
                    
{
   {item.price | currency:"￥"}}
                    
{
   {item.expiry | number:0}}
                    
{
   {item | json}}
               
          
     
        

 

 

 　　上例中用到了常见的内置过滤单个数据值的过滤器，下面一一说明。

• currency：格式化货币值，可以在后面加：跟参数，指定货币符号，默认为$
• number:格式化数字，后面跟：加参数，表示保留的小数位数，它会在千分为加上逗号
• date：参数为日期格式，可以将Date对象或者毫秒数格式化为指定的格式
• uppercase：字母大写
• lowercase:字母小写
• json：将javascript对象转换为json对象

 　　（2）过滤集合

• 限制数量　　　

　　表示只显示products的前3个项，参数为负数表示从最后一个往前算。

• 　选取项

　　用filter可以过滤出返回true的项，给个函数也是可以的，例如下面

$scope.selectItems = function(item){     return item.cat == "tt" || item.cat == "yy";       }

• 排序

 

　　默认是升序排列，加个-号则降序，当然也可以对多个谓词进行排序，像这个样子

　　注意那个小小的引号。

二、创建自定义过滤器

　　1、单值过滤

　　

    
             
今天是：{
   {now|date:"dd MMMM yyyy"}}
    
     
              
       
                    
name
                    
cat
                    
price
                    
expiry
                    
json
               
               
                    
{
   {item.name | labelCase:"###"}}
                    
{
   {item.cat | uppercase}}
                    
{
   {item.price | currency:"￥"}}
                    
{
   {item.expiry | number:0}}
                    
{
   {item | json}}
               
          
     
        

　　我们用filter方法创建自定义过滤器，filter方法有两个参数，第一个指定过滤器的名称，第二个是一个工厂函数，在工厂函数中返回一个工人函数，工人函数的第一个参数是当前值，其他参数是自定义参数。在本例中定义了一个labelCase过滤器，它的作用是在字符串前面加上自定义的前缀。

　　（2）创建一个集合过滤器。

　　跟过滤单个值的过滤器差不多，但是它要求传入的是一个数组，返回的还是一个数组

　　

.filter("skip",function(){            return function(data,num){                if(angular.isArray(data)&&angular.isNumber(num)){                    if(num>data.length || num<1){                        return data;                    }else{                        return data.slice(num);                    }                }else{                    return data;                }            }        });

 

　　这个过滤器表示的是跳过开头的几个数据项不显示。

　　（3）站在巨人的肩膀上

    
             
今天是：{
   {now|date:"dd MMMM yyyy"}}
    
     
              
       
                    
name
                    
cat
                    
price
                    
expiry
                    
json
               
               
                    
{
   {item.name | labelCase2:"###":"@@@"}}
                    
{
   {item.cat | uppercase}}
                    
{
   {item.price | currency:"￥"}}
                    
{
   {item.expiry | number:0}}
                    
{
   {item | json}}
               
          
     
        

　　原来写了一个labelCase，以此为基础写了一个labelCase2, 使之可以同时加上前缀和后缀。由此可见我是巨人（标题是站在巨人的肩膀上）。

　　至此，过滤器就学完了。感觉过滤器虽然比较简单，但是作用不小，它可以方便的让同一数据模型有不同的表现形式，非常灵活。