AngularJS中的过滤器用法已完全解决

在AngularJS的世界中，filter提供了一种格式化数据的方式，Angular也为我们提供了很多内置的过滤器，构建自定义过滤器相当简单。

在HTML的模板绑定{{}}中，我们使用|来调用过滤器。例如，我们希望显示字符串的所有大写字符：

{{姓名|大写} }

当然，我们也可以使用JavaScript中的$filter服务来调用过滤器，并以字符串大写为例：

app.controller('DemoController '，['$scope '，' $filter '，function($scope，$filter) { $scope.name=$filter('小写')(' Ari ')；}]);如何将参数传递给过滤器？只需将参数放在过滤器之后，并在中间添加一个冒号(如果有多个参数要传递，请在每个参数之后添加一个冒号)。例如，数字滤波器可以帮助我们限制位数。如果你想显示两位小数，就加数字：2。

{ { 123.456789 | number :2 } } Filter Filter主要用于对数组数据进行过滤，返回包含子数组数据的新数组。

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

filter方法接收字符串、对象或函数参数来选择/移除数组元素。

根据我们的具体观点：

1、内置滤镜1、大写、小写大小转换。

{{ '小写字符串' |大写} }//结果：小写字符串{{'tank好' |小写} }//结果：tank好|这里的竖线是一种管道函数。如果你熟悉linux，这个| root linux的管道功能基本是一样的。2.json格式。

{{{foo:' bar '，baz : 23 } | json } }//结果：{'foo': 'bar '，' baz': 23}注意：bza格式化前没有双引号，格式化后转换为JSON数据。

3、日期格式化。

mysql时间戳ng-bind=' message . time * 1000 | date : ' yyy-mm-DD ' '

{{1304375948024 |日期： '中' }//201106:39336008pm {{1304375948024 |日期} }//结果：2011年5月3日{ { 1304375948024 |日期： ' mm/DD/yyyyy @ h: MMA ' }//结果：000

{{ 1.234567 | number:1 }} //结果：1.2 {{ 1234567 | number }} //结果：1，234，567 5，货币货币格式。

{{ 250 |币}} //结果：$250.00 {{250 |币：' RMB 元' } //结果：RMB 250.00 6。筛选搜索只能查找值，不能查找关键字。

{{ [{'age': 20，id': 10，name': 'iphone'}，{'age': 12，id': 11，name': 'sunm xing'}，{'age': 44，id': 12，The ' name ' : ' test ABC ' }]| filter : ' s ' }//找到name ' : ' test ABC ' }]{ {[{ ' age ' : 20，' id': 10，' name': 'iphone'}，{'age': 12，' id': 11，' name': 'sunm xing'}，{'age': 44，Id' : 12，' name ' : ' test ABC ' }]| filter 333336var JSON string=$ filter(' JSON ')({ ' age ' :12，' id' :11，' name' 3360' sunmxing'}，{'age' :44，' id' :12，' name' :

{“‘我爱坦克' |限：6 } }//结果：我爱{“‘我爱坦克' |限：-4 } }//结果：坦克{[{‘年龄’3360 20，id’: 10，姓名。{'age' : 12，' id' : 11，' name' :' sunm xing'}，{'age' : 44，' id' : 12，' name' :' test ABC'}] |限制为：0。

{{ [{'age': 20，id': 10，name': 'iphone'}，{'age': 12，id': 11，name': 'sunm xing'}，{'age': 44，id': 12，name ' : ' test ABC ' }]| order by : ' id ' 3: true根编号降序排{{ [{'age': 20，id': 10，name': 'iphone'}，{'age': 12，id': 11，name': 'sunm xing'}，{'age': 44，id': 12，name ' : ' test ABC ' }]| order by : ' id ' }//根据编号升序排{{ [{'age': 20，id': 10，name': 'iphone'}，{'age': 12，id': 11，name': 'sunm xing'}，{'age': 44，id': 12，name ' : ' test ABC ' }]|按：['-age '，' name'] }排序二，自定过滤器功能过滤器的自定义方式也很简单，使用组件的过滤器方法，返回一个函数，该函数接收输入值，并返回处理后的结果。

app.filter('过滤器名称，函数(){返回函数（需要过滤的对象，过滤器参数1,过滤器参数2,){ //.做一些事情返回处理后的对象；} });我找了一个基本开发的手动音量调节框架，phonecat，自定义过滤器也是在这基础写的，这个框架挺好用的过滤器。射流研究…添加一个组件

angular.module('tanktest '，[]).筛选器(' tankreplace '，function(){ return function(input){ return input。替换(/tank/，'====')}；});超文本标记语言中调用

{{ 'TANK '是很好小写|tankreplace}} //结果：=====不错注意：|小写|tankreplace管道命令可以有多个

yourApp.filter('orderObjectBy '，function(){ return function(items，field，reverse){ var filtered=[]；angular.forEach(项)，function(项){ filtered。推送(项目)；});filtered.sort(函数(a，b) { return (a[field] b[field]？1 : -1);});如果(反向)过滤。反向()；返回已过滤的；};});该过滤器将对象转换成标准的数组并把它通过您指定字段排序。您可以使用orderObjectBy过滤器酷似排序包括字段名后一个布尔值，以指定的顺序是否应该得到扭转。换句话说，假的是升序，真正的下降html。调用

Li ng-repeat=' items | order object by : ' color ' :中的项目{ item.color }}/li排序搜索

输入类型=' text ' ng-model=' Search ' class=' form-control '占位符=“搜索”和tr！-ng-class=' { drop up : true } '-th ng-click=' change ORder(' id ')' ng-class=' { drop up : ORder===' ' } '产品编号span ng-class=' { order color : order type==' id ' } ' class='脱字号/span/th ng-click='变更单('名称')' ng-class=' {放弃：订单===' ' } '产品名称span ng-class=' { order color : order type==' name ' } ' class=' caret '/span/th ng-click='变更单(' price ')' ng-class=' { drop up : order===' ' } '产品价格span ng-class=' { order color : order type==' price ' } ' class=' caret '/span/th/tr/the ad t body tr ng-repeat=' product data | filter : search | order by : order type ' TD { { item。 id } }/TD TD { { item }。名称} }/TD { { item。价格|货币3360 '1 ' }/TD/tr/t车身角度js

//默认排序字段$ scope.orderType=' id$ scope。order='-'；$scope.changeOrder=函数(类型){ console.log(类型);$ scope.orderType=typeif($ scope)。order==' '){ $ scope。order='-'；} else { $ scope.order=} }