过滤器

这里说的过滤器，是用于对数据的格式化，或者筛选的函数。它们可以直接在模板中通过一种语法使用。对于常用功能来说，是很方便的一种机制。

多个过滤器之间可以直接连续使用。

1.排序 orderBy

orderBy 是一个排序用的过滤器标签。它可以像sort 函数那样支持一个排序函数，也可以简单地指定一个属性名进行操作：

[javascript] view plain copy

1. <div ng-controller="TestCtrl">  
2.   {{ data | orderBy: 'age' }} <br />  
3.   {{ data | orderBy: '-age' }} <br />  
4.   {{ data | orderBy: '-age' | limitTo: 2 }} <br />  
5.   {{ data | orderBy: ['-age', 'name'] }} <br />  
6. </div>  
7.   
8.   
9. <script type="text/javascript">  
10. var TestCtrl = function($scope){  
11.   $scope.data = [  
12.     {name: 'B', age: 4},    
13.     {name: 'A', age: 1},    
14.     {name: 'D', age: 3},    
15.     {name: 'C', age: 3},    
16.   ];  
17. }  
18. </script>  

2.过滤列表 filter

filter 是一个过滤内容的标签。

如果参数是一个字符串，则列表成员中的任意属性值中有这个字符串，即为满足条件（忽略大小写）：

[javascript] view plain copy

1. <div ng-controller="TestCtrl">  
2.   {{ data | filter: 'b' }} <br />  
3.   {{ data | filter: '!B' }} <br />  
4. </div>  
5.   
6. <script type="text/javascript">  
7. var TestCtrl = function($scope){  
8.   $scope.data = [  
9.     {name: 'B', age: 4},    
10.     {name: 'A', age: 1},    
11.     {name: 'D', age: 3},    
12.     {name: 'C', age: 3},    
13.   ];  
14. }  
15.   
16. angular.bootstrap(document.documentElement);  
17. </script>  

可以使用对象，来指定属性名， $ 表示任意属性：

[javascript] view plain copy

1. {{ data | filter: {name: 'A'} }} <br />  
2. {{ data | filter: {$: '3'} }} <br />  
3. {{ data | filter: {$: '!3'} }} <br />  

自定义的过滤函数也支持：

[javascript] view plain copy

1. <div ng-controller="TestCtrl">  
2.   {{ data | filter: f }} <br />  
3. </div>  
4.   
5.   
6. <script type="text/javascript">  
7. var TestCtrl = function($scope){  
8.   $scope.data = [  
9.     {name: 'B', age: 4},    
10.     {name: 'A', age: 1},    
11.     {name: 'D', age: 3},    
12.     {name: 'C', age: 3},    
13.   ];  
14.   
15.   $scope.f = function(e){  
16.     return e.age > 2;  
17.   }  
18. }  
19.   
20. angular.bootstrap(document.documentElement);  
21. </script>  

3.其他

时间戳格式化 date ：

[javascript] view plain copy

1. <div ng-controller="TestCtrl">  
2. {{ a | date: 'yyyy-MM-dd HH:mm:ss' }}  
3. </div>  
4.   
5. <script type="text/javascript">  
6. var TestCtrl = function($scope){  
7.   $scope.a = ((new Date().valueOf()));  
8. }  
9.   
10. angular.bootstrap(document.documentElement);  
11. </script>  

列表截取 limitTo ，支持正负数：

[javascript] view plain copy

1. {{ [1,2,3,4,5] | limitTo: 2 }}  
2. {{ [1,2,3,4,5] | limitTo: -3 }}  

大小写 lowercase ， uppercase ：

[javascript] view plain copy

1. {{ 'abc' | uppercase }}  
2. {{ 'Abc' | lowercase }}  

4.例子：表头排序

[javascript] view plain copy

1. <div ng-controller="TestCtrl">  
2.     <table>  
3.         <tr>  
4.             <th ng-click="f='name'; rev=!rev">名字</th>  
5.             <th ng-click="f='age'; rev=!rev">年龄</th>  
6.         </tr>  
7.         <tr ng-repeat="o in data | orderBy: f : rev">  
8.             <td>{{ o.name }}</td>  
9.             <td>{{ o.age }}</td>  
10.         </tr>  
11.     </table>  
12. </div>  
13. <script type="text/javascript">  
14.     var TestCtrl = function ($scope) {  
15.         $scope.data = [  
16.             {name: 'B', age: 4},  
17.             {name: 'A', age: 1},  
18.             {name: 'D', age: 3},  
19.             {name: 'C', age: 3},  
20.         ];  
21.     }  
22. </script>  

5.例子：搜索

[javascript] view plain copy

1. <div ng-controller="TestCtrl" ng-init="s=data[0].name; q=''">  
2.     <div>  
3.         <span>查找：</span> <input type="text" ng-model="q"/>  
4.     </div>  
5.     <select ng-multiple="true" ng-model="s"  
6.             ng-options="o.name as o.name + '(' + o.age + ')' for o in data | filter: {name: q} | orderBy: ['age', 'name'] ">  
7.     </select>  
8. </div>  
9.   
10. <script type="text/javascript">  
11.     var TestCtrl = function ($scope) {  
12.         $scope.data = [  
13.             {name: 'B', age: 4},  
14.             {name: 'A', age: 1},  
15.             {name: 'D', age: 3},  
16.             {name: 'C', age: 3},  
17.         ];  
18.     }  
19. </script>