文档章节

angularjs的filter过滤和orderBy排序

xiaoxin502
 xiaoxin502
发布于 2015/12/02 10:39
字数 625
阅读 594
收藏 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
广州
AngularJS 常见面试问题

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

阿K1225
2017/10/25
0
0
DevExpress v18.1新版亮点——DevExtreme篇(一)

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

Miss_Hello_World
09/07
0
0
Angular中ui-grid的使用详解

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

半指温柔乐
08/05
0
0
Angular.js 相关记录

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

彭博
2014/04/25
0
2
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

AIX 系统 (资源)

AIX--zabbix agent的编译安装以及遇到的“坑” 荐 : http://blog.51cto.com/lythjq/2128354 AIX--操作系统安装(AIX 6.1) : http://blog.51cto.com/lythjq/2128119...

寰宇01
43分钟前
0
0
Spring 转换 model 为 json 时增加属性

缘起 目前的项目中有个需求是在附件对象转换成 json 时增加个 url 属性,以前的方式是在返回附件对象或列表时候做一次统一处理,这次想看看 spring 或者 jackson fasterxml 是否自带类似功能...

郁也风
43分钟前
1
0
10大PHP比特币开源项目

如果你是一个Phper,如果你希望学习区块链,那么本文列出的 10个开源的Php比特币项目,将有助于你了解在自己的应用中 如何加入对比特币的支持。 如果你希望快速掌握使用Php对接比特币钱包的方...

汇智网教程
今天
1
0
springclould feign客户端添加全局参数

用springclould feign作为调用服务的客户端,一般来说参数可以写在feignclient的方法参数里 有时需要所有feign请求都统一添加一些参数,例如token用于鉴权等,可以这样做: 添加一个配置类,...

canneljls
今天
1
0
win32截屏并rgb24转yuv420

//最终f的内存布局为BGRA格式,需要保证buf长度足够(>w*h*4)void ScreenCap(void* buf, int w, int h){ HWND hDesk = GetDesktopWindow(); HDC hScreen = GetDC(hDesk); ......

styleman
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部