文档章节

angularjs的filter过滤和orderBy排序

xiaoxin502
 xiaoxin502
发布于 2015/12/02 10:39
字数 625
阅读 663
收藏 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
广州
私信 提问
$apply already in progress at Error

Search: Sort by: name age {{phone.name}} {{phone.snippet}} {{phone.age}} XMLHttpRequest cannot load file:///D:/ProgramFilesZhtt/tomcat1081/webapps/AngularJS/js/05.json. Cross or......

梦幻女侠
2013/10/11
1K
1
DevExpress v18.1新版亮点——DevExtreme篇(一)

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

Miss_Hello_World
2018/09/07
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
现在就开始使用AngularJS的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0
AngularJS 常见面试问题

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

阿K1225
2017/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

威胁预警|首现新型RDPMiner挖矿蠕虫 受害主机易被添加恶意账户

近日,阿里云安全发现一种新型挖矿蠕虫RDPMiner,通过爆破Windows Server 3389端口RDP服务的方式进行挖矿木马传播,致使用户CPU占用率暴涨,机器卡顿,更被创建名为DefaultAccount的账号。攻...

zhaowei121
12分钟前
1
0
request获取路径方式

从request获取各种路径总结 request.getRealPath("url"); // 虚拟目录映射为实际目录 request.getRealPath("./"); // 网页所在的目录 request.getRealPath("../"); // 网页所在目录的上一层目......

鱼煎
13分钟前
0
0
Java访问带有Kerberos认证的HBase

conf = HBaseConfiguration.create();conf.set("hadoop.security.authentication" , "kerberos" );conf.set("hbase.security.authentication","kerberos");conf.set("hbase.master.keyta......

stys35
13分钟前
0
0
Java创建线程的三种方式

一、继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代 表了线程要完成的任务。因此把run()方法称为执行体。 (2)创建Thread子类的实例,即创建...

Java干货分享
18分钟前
0
0
IDE 插件新版本发布,开发效率 “biu” 起来了

近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明。 本地应用一键部署到任何...

阿里云官方博客
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部