angularjs filter详解

系统的学习了一下AngularJS，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对 smarty比较熟悉的话，学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能，angularjs的 filter功能可分为二种，一种是内置的过滤器，一种是自定义的。

一，内置的过滤器

1，uppercase，lowercase大小转换

Java代码  

1. {{ "lower cap string" | uppercase }}     //结果：LOWER CAP STRING  
2. {{ "TANK is GOOD" | lowercase }}         //结果：tank is good  

 ｜这里的竖线是一种管道功能，如果对linux比较熟悉的话，这块的｜根linux的管道功能，基本是一样的2，json格式化

Java代码  

1. {{ {foo: "bar", baz: 23} | json }}    //结果：{ "foo": "bar", "baz": 23 }  

注意：bza没格式前是没有双引号的，格式化后就转换成了json数据了。

3，date格式化

Java代码  

1. mysql时间戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"  
2. {{ 1304375948024 | date:'medium'}}      //May 03, 2011 06:39:08 PM  
3. {{ 1304375948024 | date }}                          //结果：May 3, 2011  
4. {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}     //结果：05/03/2011 @ 6:39AM  
5. {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}    //结果：2011-05-03 06:39:08  

 4，number格式化

Java代码  

1. {{ 1.234567 | number:1 }}    //结果：1.2    
2. {{ 1234567 | number }}       //结果：1,234,567   

 5，currency货币格式化

Java代码  

1. {{ 250 | currency }}                 //结果：$250.00    
2. {{ 250 | currency:"RMB ￥ " }}       //结果：RMB ￥ 250.00    

 6，filter查找 只能查value,不能查key

Java代码  

1. {{ [{"age": 20,"id": 10,"name": "iphone"},  
2. {"age": 12,"id": 11,"name": "sunm xing"},  
3. {"age": 44,"id": 12,"name": "test abc"}  
4. ] | filter:'s'}}    //查找含有有s的行  
5.   
6. //上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]  
7.   
8. {{ [{"age": 20,"id": 10,"name": "iphone"},  
9. {"age": 12,"id": 11,"name": "sunm xing"},  
10. {"age": 44,"id": 12,"name": "test abc"}  
11. ] | filter:{'name':'ip'} }}   //查找name like ip的行  
12. //上例结果:[{"age":20,"id":10,"name":"iphone"}]  
13.   
14. $filter('number')(30000, 2);  
15. var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])  

 7，limitTo字符串，对像的截取

Java代码  

1. {{ "i love tank" | limitTo:6 }}           //结果：i love  
2. {{ "i love tank" | limitTo:-4 }}          //结果：tank  
3.   
4. {{ [{"age": 20,"id": 10,"name": "iphone"},  
5. {"age": 12,"id": 11,"name": "sunm xing"},  
6. {"age": 44,"id": 12,"name": "test abc"}  
7. ] | limitTo:1 }}     //结果：[{"age":20,"id":10,"name":"iphone"}]  

 8，orderBy对像排序

Java代码  

1. {{ [{"age": 20,"id": 10,"name": "iphone"},  
2. {"age": 12,"id": 11,"name": "sunm xing"},  
3. {"age": 44,"id": 12,"name": "test abc"}  
4. ] | orderBy:'id':true }}        //根id降序排  
5.   
6. {{ [{"age": 20,"id": 10,"name": "iphone"},  
7. {"age": 12,"id": 11,"name": "sunm xing"},  
8. {"age": 44,"id": 12,"name": "test abc"}  
9. ] | orderBy:'id' }}           //根据id升序排  
10.   
11. {{ [{"age": 20,"id": 10,"name": "iphone"},  
12. {"age": 12,"id": 11,"name": "sunm xing"},  
13. {"age": 44,"id": 12,"name": "test abc"}  
14. ] | orderBy:['-age','name'] }}  

二，自定filter功能

filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

Java代码  

1. app.filter('过滤器名称',function(){  
2.     return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){  
3.         //...做一些事情    
4.         return 处理后的对象;  
5.     }  
6. });   

我找了一个基本angularjs的mvc框架，phonecat，自定义filter也是在这基础写的，这个框架挺好用的。

filters.js添加一个module

Java代码  

1. angular.module('tanktest', []).filter('tankreplace', function() {  
2.     return function(input) {  
3.         return input.replace(/tank/, "=====")  
4.     };  
5. });  

html中调用

Java代码  

1. {{ "TANK is GOOD" | lowercase |tankreplace}}   //结果：===== is good  

 注意：| lowercase |tankreplace管道命令可以有多个

Java代码  

1. yourApp.filter('orderObjectBy', function() {  
2.   return function(items, field, reverse) {  
3.     var filtered = [];  
4.     angular.forEach(items, function(item) {  
5.       filtered.push(item);  
6.     });  
7.     filtered.sort(function (a, b) {  
8.       return (a[field] > b[field] ? 1 : -1);  
9.     });  
10.     if(reverse) filtered.reverse();  
11.     return filtered;  
12.   };  
13. });  

该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似ORDERBY，包括字段名后一个布尔值，以指定的顺序是否应该得到扭转。换句话说，假的是升序，真正的下降。html调用

Java代码  

1. <li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>  

排序搜索

Java代码  

1. <input type="text" ng-model="search" class="form-control" placeholder="Search">  
2. <thead>  
3.     <tr>  
4.         <!--  ng-class="{dropup:true}" -->  
5.         <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}">  
6.             产品编号  
7.             <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span>  
8.         </th>  
9.         <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}">  
10.             产品名称  
11.             <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span>  
12.         </th>  
13.         <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}">  
14.             产品价格  
15.             <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span>  
16.         </th>  
17.     </tr>  
18. </thead>  
19. <tbody>  
20.     <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType">  
21.         <td>{{item.id}}</td>  
22.         <td>{{item.name}}</td>  
23.         <td>{{item.price | currency: '￥'}}</td>  
24.     </tr>  
25. </tbody>  

 angularjs

Java代码  

1. //默认排序字段  
2. $scope.orderType = 'id';  
3.   
4. $scope.order = '-';  
5.   
6. $scope.changeOrder = function(type) {  
7.     console.log(type);  
8.     $scope.orderType = type;  
9.   
10.     if ($scope.order === '') {  
11.         $scope.order = '-';  
12.     }else{  
13.         $scope.order = '';  
14.     }  
15. }