angularJs中filter的用法及api解释

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

By the way, 过滤器filter不能用在ng-model里，ng-model里必须是个expression，即字符串。

<!-- 这种是会报错的，虽然效果是ok的-->
 <input type="text" ng-model="clickRoom.houseSumFacePrice number:2" class="form-control col-sm-8"/>

angularJs中filter的用法及api解释

猜你喜欢