一  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. Android 如何添加一种锁屏方式

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  2. Ubuntu12.10硬盘安装

    今天介绍如下如何在Win7环境下从硬盘安装Ubuntu(我使用的版本是12.10). 1.下载Ubuntu ISO镜像文件ubuntu-12.10-desktop-i386.iso. 2.使用压缩软件 ...

  3. Tomcat启用HTTPS(生成证书、配置Tomcatserver)

    Windows下的配置: 第一步:为server生成证书 使用keytool 为 Tomcat 生成证书.假定目标机器的域名是" localhost ". keystore 文件存 ...

  4. Android Studio导入项目

    原文:http://ask.android-studio.org/?/article/21 本篇教程中使用到的Android Studio版本为1.0, Eclipse ADT版本23.0.4.请尝试 ...

  5. [React Fundamentals] Composable Components

    To make more composable React components, you can define common APIs for similar component types. im ...

  6. jquery 源码分析学习地址

    http://www.ccvita.com/121.htmljQuery工作原理解析以及源代码示例http://www.cnblogs.com/haogj/archive/2010/04/19/171 ...

  7. 打开已存在 Android项目及常见的问题

    Eclipse 打开已存在 Android项目及常见的问题   1.  点击菜单“File”-- "Import",会弹出 Import 对话框:   2,  选择“General ...

  8. PAT 1011

    1011. World Cup Betting (20) With the 2010 FIFA World Cup running, football fans the world over were ...

  9. 介绍一些实用的IOS手势识别库 (COCOS2D)

    http://www.supersuraccoon-cocos2d.com/zh/2012/11/14/introduction-to-some-great-ios-gesture-recogniti ...

  10. 使用 Eclipse 的 Navigator Link Helper 实现导航器与编辑器的关联

    概要 Link With Editor 是 Eclipse 内置功能中十分小巧,但却异常实用的一个功能.这个开关按钮 (Toggle Button) 出现在各式导航器视图 ( 例如 Resource ...