AngularJS中的过滤器filter用法完全解析

在AngularJS的世界里，filter提供了一种格式化数据的方法，Angular也提供给我们了很多内建的过滤器，并且建立自定义过滤器也是相当的简单

在HTML的模板绑定{{}}中，我们使用 | 来调用过滤器，比如，我们想让字符串全部大写字符显示：

当然了，我们也可以在JavaScript中使用$filter服务来调用过滤器，还拿字符串大写来举例：

$scope.name = $filter('lowercase')('Ari');
}]);

如何传递参数到filter呢？只需要把参数放在filter之后，中间加个冒号（如果有多个参数要传递，在每个参数后加上冒号）比如，数字过滤器可以帮助我们限制数字的位数，如果想显示两位小数，加上number:2就可以了

filter过滤器主要用来过滤一个数组数据并返回一个包含子数组数据的新数组。

比如，在客户端搜索时，我们可以快速的从数组中过滤出我们想要的结果。

这个filter方法接收一个string，object，或者function参数用来选择/移除数组元素。

下满我们具体来看：

一，内置的过滤器 1，uppercase，lowercase大小转换

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

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

3，date格式化

MysqL时间戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"

4，number格式化

5，currency货币格式化

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

//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]

{{ [{"age": 20,"name": "test abc"}
] | filter:{'name':'ip'} }} //查找name like ip的行
//上例结果:[{"age":20,"id":10,"name":"iphone"}]

$filter('number')(30000,2);
var jsonString = $filter('json')({"age":12,"name":"test abc"}])

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

{{ [{"age": 20,"name": "test abc"}
] | limitTo:1 }} //结果：[{"age":20,"name":"iphone"}]

8，orderBy对像排序

{{ [{"age": 20,"name": "test abc"}
] | orderBy:'id' }} //根据id升序排

{{ [{"age": 20,"name": "test abc"}
] | orderBy:['-age','name'] }}

二，自定filter功能

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

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

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

html中调用

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

b[field] ? 1 : -1); }); if(reverse) filtered.reverse(); return filtered; }; });

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

403_98@

排序搜索

名称

angularjs

$scope.order = '-';

$scope.changeOrder = function(type) {
console.log(type);
$scope.orderType = type;

if ($scope.order === '') {
$scope.order = '-';
}else{
$scope.order = '';
}
}