我们用angularjs {{}}，ng-model循环绑定数组或对象的内容的时候，有时候会用到排序，有时候可能会有多个字段排序

具体要用到过滤

数据的展现，可以通过ng-repeat实现。当网页解析到ng-repeat的时候，会为每一个数组中的元素都克隆一份标签，进行编译解析。

如上图  ，用orderBy可以实现排序的功能，具体用法见上图，上图显示的结果如下图，如果你需要由小到大的排序的话，可以把'Age'后面的true去掉，

请看截图 ，按照年龄从大到小开始排序了

有时候，我们做开发，数据要比这个复杂，需要对多个字段进行排序，具体做法很简单，（还有一个小写字母换大写，直接在 | 后面加appercase），我们在oederBy后面加入一个数组，数组里把你需要排序的字段写在里面，如下图

结果如下图

好啦，这就是简单的数据排序啦，刚开始的前端小白，欢迎指正

angularjs 字段排序 多字段排序的更多相关文章

  1. MapReduce按照两个字段对数据进行排序

    按照k2排序,要求k2必须是可以比较的,即必须实现WritableComparable接口. 但是如果还想让别的字段(比如v2中的一些字段)参与排序怎么办? 需要重新定义k2....把需要参与排序的字 ...

  2. jquery easyUI DataGrid 初始化的时候就显示可排序的字段

    在使用easy ui的列表中,想要标记可以排序的字段,使用户一看页面就知道哪些是可以点击排序的. 给可排序的字段添加 图标在列名后面.不可排序的字段还和原来一样. 步骤: 你需要一个图标 , 你需要给 ...

  3. YII关联字段并带搜索排序功能

    1.简介 从接触yii框架到现在已经快有两个月了,但是自己对yii框架的了解程度并不是很深,并没有系统地去学习,仅仅只是在做项目的时候遇到不懂得知识才去翻手册. 在上一个项目中因为需要将关联的表的字段 ...

  4. MySQL的选则字段+联表+判断+排序(order by)

    MySQL的选则字段+联表+判断+排序(order by) 两个表:1.成绩单 2.查询名单 目标: 1.选中全部字段,用于输出. 2.成绩单中有很多人的成绩,第一步是希望通过联表,只查查询名单上的人 ...

  5. row_number()over(partition by 字段 order by 字段)ID，修改重复行的字段值。

    案例分析: 现在要查询一个表单里面的运费结果,但是他还有分录,为了显示分录,必须把表头显示出来,问题是,他要查询运费的合计, 但是这样就会导致重复行也加进去了,这样显然数据不准,为此,可以把重复的行设 ...

  6. access数据库用sql语句添加字段，修改字段，删除字段

    用 Create Table 建立一个表 Table1 ,主键是自动编号字段,另一个字段是长度是 10 的文本字段. 代码如下:CREATE TABLE Table1 (Id COUNTER CONS ...

  7. Ext列表展现--普通排序sortable--全局排序remoteSort(EXTJS 全局排序问题)

    关于Ext的排序问题,一般涉及到两种方式. A.一种是默认的客户端排序机制,对当前页进行排序.sortable 这种排序模式不用多说,是人都会: 1.可以在Ext.grid.ColumnModel列模 ...

  8. 对JavaScript对象数组按指定属性和排序方向进行排序

    引子 在以数据为中心的信息系统中,以表格形式展示数据是在常见不过的方式了.对数据进行排序是必不可少的功能.排序可以分为按单个字段排序和按多个字段不同排序方向排序.单字段排序局限性较大,不能满足用户对数 ...

  9. jqgrid 单列排序和组合排序

    有时,我们需要设置jqgrid表格按某个列排序,或则按多个列组合排序.如何实现? 1)设置可以排序的列  sortable: true 2)设置 multiSort: true 启用组合排序 $(&q ...

随机推荐

  1. Scala入门系列（五）：面向对象之类

    定义类 // 定义类,包含field以及method class HelloWorld { private var name = "Leo" def sayHello() { pr ...

  2. zoj 3195 Design the city LCA Tarjan

    题目链接 : ZOJ Problem Set - 3195 题目大意: 求三点之间的最短距离 思路: 有了两点之间的最短距离求法,不难得出: 对于三个点我们两两之间求最短距离 得到 d1 d2 d3 ...

  3. 深入理解php内核 编写扩展_III- 资源

    原文:http://devzone.zend.com/article/1024-Extension-Writing-Part-III-Resources 编写扩展_III- 资源 介绍 资源 初始化资 ...

  4. java.util.HashSet, java.util.LinkedHashMap, java.util.IdentityHashMap 源码阅读 (JDK 1.8)

    一.java.util.HashSet 1.1 HashSet集成结构 1.2 java.util.HashSet属性 private transient HashMap<E,Object> ...

  5. 使用nginx代理跨域，使用nginx代理bing的每日一图

    前言 自从搞清楚了跨域原理后一直自鸣得意,感觉跨域没啥问题了.而事实上对关于跨域的几个header的理解也有限,但那又如何,我能做到跨域就行了.今天想把博客背景图改成bing的每日一图,发现遇到跨域问 ...

  6. sqlserver 全库查询 带架构

    网上现有的全库查询,无法识别自定义架构的数据库结构: ) ) ) declare @counts int )--以上定义变量 declare cur1 cursor for select a.name ...

  7. solr6.5.0版本（Windows安装图解）

    此教程为solr6.5.0安装,自己制作,希望可以帮到你们.

  8. Cesium几个案例介绍

    前言 本文为大家介绍几个Cesium的Demo,通过这几个Demo能够对如何使用Cesium有进一步的了解,并能充分理解Cesium的强大之处和新功能.其他的无需多言,如果还不太了解什么是Cesium ...

  9. PHP 使用Echarts生成数据统计报表

    echarts统计,心血来潮~~ 先看下效果图 看下代码 HTML页面  为ECharts准备一个Dom,宽高自定义 <div class="panel panel-info" ...

  10. Express4.x API (二)：Request (译)

    写在前面 最近学习express想要系统的过一遍API,www.expressjs.com是express英文官网(进入www.epxressjs.com.cn发现也是只有前几句话是中文呀~~),所以 ...