1、AngularJS过滤器能做什么

AngularJS过滤器很强大，能把一些本来复杂化的功能简单化，例如：在做web开发的时候，相信很多程序员都做过列表的排序功能，通常我们的做法是要写一个排序的sql查询语句，然后通过ajax从后端把数据取出来，后显示到页面上。传统做法过程复杂，而且要访问数据库。而AngularJS的过滤器只需通过几行简单的前端代码，而且无需访问数据库，直接在前端页面就完成了排序功能。下面我就来讲下怎么实现

2、列表排序功能的实现

我们要实现一个这样排序的功能，如下图：一个列表里我们鼠标点击表头的数量，单价，生产日期，都能按照数量，单价，生产日期来进行排序

降序效果图

实现步骤：

一：引入包angularjs.min.js

二：先用 angularjs完成表格内容的实现,如图

Html代码

AngularJS代码

三：在控制器声明一个变量 $scope.selectedThree=””这个变量作用后面再讲。如下图

四：在html代码里给表头数量，单价，生成日期添加angularJs的点击事件，如图

ng-click="selectedThree='count'"这句代码的意思当我们点击表头数量的时候，就把数量对应列名count传值给变量selectedThree,同理 单价和生产日期的点击事件也是如此

五：在表内容的tr里的ng-repeat标签增加如下代码| orderBy:selectedThree:!desc 如图

‘|’是过滤器的语法规则表示符号 ‘|’前面是要过滤器的对象，后面是过滤的规则

‘:’也是过滤器的语法规则符号，

orderBy 是过滤器里的关键字，排序的意思

selectedThree是我们声明的变量名，它记录了鼠标每次点击的列名

!desc 是降序 desc是升序

orderBy:selectedThree:!desc 这句代码的意思就是表格数据根据传过来列名进行降序排序

六：好了，现在就可以测试一下angulaJS的简单而又强大的排序功能了