文档章节

angularjs的filter过滤和orderBy排序

xiaoxin502
 xiaoxin502
发布于 2015/12/02 10:39
字数 625
阅读 632
收藏 0

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

后面在网上参考了别人的博文: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文件中使用过滤器,一般是用在对数据进行一些过滤或者转化,直接对数据进行修改的情况。


© 著作权归作者所有

共有 人打赏支持
xiaoxin502
粉丝 0
博文 4
码字总数 1730
作品 0
广州
私信 提问
DevExpress v18.1新版亮点——DevExtreme篇(一)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExtreme JavaScript Controls v18.1 的新功能,快来下载试用新版本!点击下载...

Miss_Hello_World
09/07
0
0
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
实践总结 - 不可错过的Angular应用技巧

angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据. 关于项目构建 (1) requirejs以及Yeoman 在刚开始接触或者使用...

顽Shi
2014/07/21
0
22
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2

没有更多内容

加载失败,请刷新页面

加载更多

2135亿背后,你所不知道的那些阿里瞬间

摘要: 01 10日下午五点。 上海梅赛德斯奔驰文化中心,天猫双11前夜的“猫晚”就在离我100米的地方。 台上正彩排,鲜衣怒马,烈焰繁花。但走进导播车,白天和黑夜好像没有区别,但你知道吗,...

阿里云官方博客
38分钟前
1
0
叶曼音频

道德经 道德经01a 道德经01b

亚林瓜子
46分钟前
1
0
Go 使用channel控制并发

前言 channel一般用于协程之间的通信,channel也可以用于并发控制。比如主协程启动N个子协程,主协程等待所有子协程退出后再继续后续流程,这种场景下channel也可轻易实现。 场景示例 总结 ...

恋恋美食
今天
3
0
斐波那契堆的理解,节点mark属性和势函数

斐波那契堆 看了好多博客,都是照搬算法导论的内容,没有自己的理解,比如为什么有mark属性,势函数的作用,以及为什么叫斐波那契堆,下面说说鄙人的理解。 势函数 势函数是根节点个数加上2...

杨喆
今天
7
0
NIO源码详解

阻塞io和无阻塞io: 阻塞io是指jdk1.4之前版本面向流的io,服务端需要对每个请求建立一堆线程等待请求,而客户端发送请求后,先咨询服务端是否有线程相应,如果没有则会一直等待或者遭到拒 ...

沉稳2018
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部