一  orderBy过滤器
 
AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array:
 
第一种:function,如果是function,那么function函数会遍历待排序的数组,并将返回的结果作为angular库函数中comparator的参数,进行比较排序。
 
第二种:如果是字符串,假如待排序的数组为对象,那么将会按照待排序数组中的每个对象的对应属性值,进行排序。如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降序排序。如果字符串为空,那么将按照元素自身进行排序。
 
第三种:如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序,如果a属性值相同,那么将按照b属性值进行排序。
 
如何利用orderBy,实现简单元素数组的排序,需要利用orderBy的第一参数为function的这种类型:定义function 为:
 
$scope.sortSimpleType(op){
     return op;
}
 
在页面中的代码为:字符串数组排序
<div>
    {{['test','bob','market','type','barrow'] | orderBy: sortSimpleType}}
</div>
 
排序结果为:
 
 ["barrow","bob","market","test","type"]
 
数字数组排序:
 
<div>
    {{[1,3434,2,1,12121,6,56,3] | orderBy: sortSimpleType}}
</div>
 
排序结果为:
 
[1,1,2,3,6,56,3434,12121]
当然了,参数类型为function的orderBy过滤器,也可以用来对元素为对象的数组进行排序。只要在函数中返回对象的属性值即可。
例如,
 
<div>
    {{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: sortObjectType}}
</div>

$scope.sortObjectType = function(obj){

   return obj['name']
}
排序结果为:
[{"name":"bob","age":"23"},{"name":"nick","age":"34"}]
 
对于这种需要按照对象属性进行排序,可以采用orderBy参数类型为string的方式,这样可以充分利用angular的排序特性,对于上述的例子可以改为:
<div>
    {{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: 'name'}}
</div>
 

//排序结果为:

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}].
 
 
针对多属性的排序,采用第三种策略,参数为array类型,如:
 
<div>
    {{[{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}]] | orderBy:[ 'name','age']}}
</div>
 
//排序结果为:
 

[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]

 
到此orderBy的使用介绍已经结束。那么orderBy在angular内部是怎么实现的排序了,需要再次深入对angular的代码做出分析。

angular中的orderBy过滤器使用的更多相关文章

  1. angular中的自定义过滤器

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  2. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  3. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  4. ionic准备之angular基础——格式化数据以及过滤器(8)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

  6. (七)理解angular中的module和injector,即依赖注入

    (七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54      阅读:63060      评论:1      收藏:0      [点 ...

  7. Angular JS 学习之过滤器

    1.过滤器可以使用一个管道字符(|)添加到表达式和指令中: 2.AngularJS过滤器可用于转换数据: **currency:格式化数字为货币格式: **filter:从数组项中选择一个子集: ** ...

  8. 理解angular中的module和injector,即依赖注入

    理解angular中的module和injector,即依赖注入 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是java ...

  9. Angular.js之内置过滤器学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 英语阅读积累<一>

    Passage 1.Woodpecker    惹treat or trick There are many apple trees in a garden.  They’re good friend ...

  2. Genymotion与本地电脑共享文件夹的方法

    首先打开vbox的界面,左侧列表应该可以看到Genymotion添加的虚拟机,如图:对要设置的虚拟机单击右键,在弹出的菜单中点击“设置...”,弹出设置页面后点击左侧最后一个标签“共享文件夹”,点击右 ...

  3. Flex 自动获取焦点 监听全局键盘事件

    在mxml里监听addedToStage事件 protected function application1_addedToStageHandler(event:Event):void { this. ...

  4. HDU 5493 Queue 树状数组

    Queue Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5493 Des ...

  5. Android开发实例之多点触控程序

    智能终端设备的多点触控操作为我们带来了种种炫酷体验,这也使得很多Android开发者都对多点触控程序的开发感兴趣.实际上多点触控程序的实现并不是那么遥不可及,而是比较容易.本文就主要通过一个实例具体讲 ...

  6. 使用Unison同步服务器目录

    一.Unison简介Unison是Windows.Linux以及其他Unix平台下都可以使用的文件同步工具,它能使两个文件夹(本地或网络上的)保持内容的一致.Unison拥有与其它一些同步工具或文件系 ...

  7. [Practical Git] Configure global settings with git config

    You can set up global "git config" settings that apply to all git projects on your system. ...

  8. select poll使用

    select poll使用     2.1. 怎样管理多个连接?“我想同一时候监控一个以上的文件描写叙述符(fd)/连接(connection)/流(stream),应该怎么办?” 使用 select ...

  9. 3D Touch的简单使用

    6s发布以后新增了一个3D touch功能,我个人觉得这个功能点在某些时候还是挺方便的,比如说微信的扫码功能. 直接长按图标就可以进入这个功能里面,不用再打开app.一层层查找了,比较方便. 其实这个 ...

  10. Linux下编译安装redis,详细教程

    话不多说,直接开工 准备工作: 本人测试环境:Win10 虚拟机:VM Linux:CentOS5.5 (已搭建好LNMP环境) 软件包:redis-2.6.14.tar.gz (Linux下redi ...