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,及包含关键词就返回。第四个参数,没用过。