angularJs饱受广大开发者欢迎，除了其依赖注入，双向绑定的思想，directive指令，filter过滤器也极大的提高了开发效率，代码更加优雅，维护起来也更加方便。比如，上传，打印，排序，流程等只需一个指令，并绑定相应的变量即可实现，根本不需要后台同事编写JS，好的指令，不仅可复用，可拓展，还得可以维护。指令用的蛮多了，就不赘述，今天谈谈它的好基友，filter过滤器。angularJS的过滤器非常强大，一个filter能瞬间format时间的格式，货币，数字，以及自定义过滤器对目标数组进行过滤。
过滤器使用起来也很简单，直接上栗子：
<div class="search-project"> <h4 class="text-muted text-thin">选择项目</h4> <input type="text" class="form-control" placeholder="请输入项目名称" ng-model="query"> </div> <ul class="nav" > <li ng-repeat="project in projectItems | filter:query"> <a class="media-Box p mt0" ng-click="selectProject(project);"> <span class="media-Box-body"> <span class="media-Box-heading"> <i class="fa fa-map-marker"></i> {{project.projectName}} </span> </span> </a> </li> </ul>
了解过ng的朋友，一眼就能明白，在input里的ng-model=‘query’就是双向绑定的变量。而下边的ng-repeat=”project in projectItems | filter:query”，首先就是遍历projectItems这个数组，而filter就是依据query这个字段进行过滤。
可是在js的controller里怎么取得projectItems根据query的过滤结果呢，先给出api地址，https://docs.angularjs.org/api/ng/filter/filter
上边给出了两种写法，一种是html模板里用过滤器，也就是例子中那种用法，还有一种是在js里用filter，正好！！！
//在html模板里
{{ filter_expression | filter : expression : comparator : anyPropertyKey}}// 这里的filter_expression可以理解为source Array
//在js controller里
$filter('filter')(array,expression,comparator,anyPropertyKey)
这里每个参数的意义也给一下简单的解释
| 参数 | 类型 | 详解 |
|---|---|---|
| array | array | 目标数组 |
| expression | string，object，function | 用于筛选目标数组，1.当是字符串时，用于匹配目标array的内容，目标数组里所有带有字符串的数组及对象将会与此字符串进行匹配，matched的将会返回。嵌套结构的数据也会进行匹配，但是带有’!’前缀的将会忽略。2.当是对象时，用于过滤array数组的特定属性。例如，{name：”M”,phone:”1”}将会返回带有name值为M和phone值为1的array项。只匹配属性名可用（举例{$:’text’}）来选取带有text属性的对象及嵌套对象。带有‘！’前缀的将会忽略，例如{name:”!M”},将会返回一个数组，包括不含M值得name属性。3.如果是一个function（value,index,array）,此函数用于重写过滤器，可以根据index及value值来自由过滤。 |
| comparator | function（actual,expected），true，false | 这个参数用来配置匹配的规则，1.当它是function（act，exp）函数的时候，将会把期望值和实际值哪来比较，并且通过的一定的规则，如果通过则返回true，宣布matched。2.当他是true的时候，值得是function(actual,expected) { return angular.equals(actual,expected)}，也就是必须完全匹配才返回true。3.当它是false的时候，它会寻找一个substring的match，及不必完全匹配，像上边栗子中包含对应文字就会matched。默认是false |
好了，有了这里的用法及解释，就可以写咯，在controller里用过
$filter('filter')($scope.projectItems,query)
就可以得到依据query过滤的结果。第一个参数是目标数组，第二个参数是根据筛选的关键词，第三个参数默认是false，及包含关键词就返回。第四个参数，没用过。