angularjs的filter过滤和orderBy排序
angularjs的filter过滤和orderBy排序
xiaoxin502 发表于2年前
angularjs的filter过滤和orderBy排序
  • 发表于 2年前
  • 阅读 210
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: angularjs的filter过滤和orderBy排序

今天项目中需要对输入对象进行多条件过滤,但我又不想使用多个过滤器来进行过滤,麻烦,而且也不便于维护。

后面在网上参考了别人的博文:http://www.tuicool.com/articles/ueUZBv

里面对angularjs的内置过滤器说得很详细,而对于filter过滤器的几种用法,我最喜欢的是通过传递函数进行过滤的形式,代码大致如下:

$scope.filterFunc = function(e){return e.xxx > 4};
<div ng-repeat="item in items | filter:filterFunc">
    .......
</div>
在过滤函数中,filter会传进来一个参数,这个参数就是在循环中每个对象的实例,你可以通过return一个判断条件来确定这个对象是否返回。如果不想进行任何过滤,直接返回e实例即可。

而且,在过滤函数中,你可以通过逻辑代码对实例进行多条件的判断,编写起来比较灵活,推荐使用!

angularjs中内置的另一个常用过滤器:orderBy,主要用来对数据进行排序,它可以多字段,按照字段书写的先后顺序来进行排序。orderBy可以通过函数传参的方式来进行使用,也可以通过字符串、数组进行传参,我觉得后两种比较方便,分别可以用于单字段排序和多字段排序,大致用法如下:

<!--单字段排序,根据对象中的name属性进行升序排序,如需降序排序,则将'name'换成'-name'在属性名前加个负号即可-->
<div ng-repeat="item in items |orderBy:'name'">
   .....
</div>
<!--多字段排序,根据对象中的name属性进行升序排序,排序完再对age属性进行升序排序,如需降序排序,在需要降序排序的属性名前加个负号即可-->
<div ng-repeat="item in items |orderBy:['name','age']">
   .....
</div>
内置过滤器也可以在js文件中使用,只要在angularjs组件定义时注入$filter组件,即可在代码中使用过滤器。

app.controller('testC',['$scope','$filter',function($scope,$filter){
    $scope.num = $filter('currency')(123534);
  $scope.date = $filter('date')(new Date());  
]}



在页面中使用过滤器只是对在页面对显示的结果进行过滤,而不会对原来的数据进行修改,而在js文件中使用过滤器,一般是用在对数据进行一些过滤或者转化,直接对数据进行修改的情况。


标签: angular filter orderBy
共有 人打赏支持
粉丝 0
博文 4
码字总数 1730
×
xiaoxin502
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: