angularjs 实现排序功能
实现公式:{{orderBy_expression | orderBy:expression:reverse}}
Example
<script>
var app=angular.module("myApp",[]);
app.controller("Ctrl",function($scope){
$scope.friends=[
{name:"John",phone:'555-1212',age:10},
{name:"Mary",phone:'555-9876',age:19},
{name:"Mike",phone:'555-4321',age:21},
{name:"Admin",phone:'555-5678',age:35},
{name:"Julie",phone:'555-8765',age:29},
];
$scope.predicate='-age';
});
<script>
<body>
<div ng-controller="Ctrl">
<pre>Sort predicate={{predicate}};reverse={{reverse}}</pre>
<hr/>
[<a href="" ng-click="predicate=''">unsorted</a>]
<table class="friend">
<tr>
<th>
<a ng-click="predicate='name';reverse=!reverse">Name</a>
<!-- (<a ng-click="predicate='-name';reverse=fase">^</a>)-->
</th>
<th><a href="" ng-click="predicate='phone';reverse=!reverse">phone number</a></th>
<th><a href="" ng-click="predicate='age';reverse=!reverse">Age</a></th>
</tr>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
</body>
angularjs 实现排序功能的更多相关文章
- AngularJS table 按照表头字段排序功能(升序和降序)
一.表格按照表头排序 <!doctype html> <html ng-app="a3_4"> <head> <title>表头排序 ...
- 禁用datagridview中的自动排序功能
把datagridview中的自动排序功能禁用自己收集的两种方法,看看吧①DataGridView中的Columns属性里面可以设置.进入"EditColumns"窗口后,在相应的 ...
- ListBox实现拖拽排序功能
1.拖拽需要实现的事件包括: PreviewMouseLeftButtonDown LBoxSort_OnDrop 具体实现如下: private void LBoxSort_OnPreviewMou ...
- 简单实现Redis缓存中的排序功能
1.在实现缓存排序功能之前,必须先明白这一功能的合理性.不妨思考一下,既然可以在数据库中排序,为什么还要把排序功能放在缓存中实现呢?这里简单总结了两个原因:首先,排序会增加数据库的负载,难以支撑高并发 ...
- Java实现中文字符串的排序功能
package test; /** * * @Title 书的信息类 * @author LR * @version 1.0 * @since 2016-04-21 */ public class B ...
- MYSQL-实现ORACLE- row_number() over(partition by ) 分组排序功能
MYSQL-实现ORACLE- row_number() over(partition by ) 分组排序功能 由于MYSQL没有提供类似ORACLE中OVER()这样丰富的分析函数. 所以在MYSQ ...
- nls_sort和nlssort 排序功能介绍
nls_sort和nlssort 排序功能介绍 博客分类: oracle ALTER SESSION SET NLS_SORT=''; 排序影响整个会话 Oracle9i之前,中文是按照二进制编码 ...
- [WPF]ListView点击列头排序功能实现
[转] [WPF]ListView点击列头排序功能实现 这是一个非常常见的功能,要求也很简单,在Column Header上显示一个小三角表示表示现在是在哪个Header上的正序还是倒序就可以了. ...
- MVC5 Entity Framework学习参加排序、筛选和排序功能
上一篇文章实现Student 基本的实体CRUD操作.本文将展示如何Students Index页添加排序.筛选和分页功能. 以下是排序完成时.经过筛选和分页功能截图,您可以在列标题点击排序. 1.为 ...
随机推荐
- Java GC 专家系列5:Java应用性能优化的原则
本文是GC专家系列中的第五篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.所以,你应该已经了解了JDK 7中的5种GC类型,以及每种GC ...
- MongoDB基础知识 01
MongoDB基础知识 1. 文档 文档是MongoDB中的数据的基本单元,类似于关系型数据库管理系统的行. 文档是键值对的一个有序集.通常包含一个或者多个键值对. 例如: {”greeting& ...
- Away3d 骨骼动画优化
很多朋友说Away3D 的骨骼数限制在32根,确切的说应该是Stage3D 的限制.在 AGAL2.0之前 VC寄存器是128个,每个vc常量寄存器最大只能容纳4位,transform占用一个4*4的 ...
- 传统IO与NIO的比较
本文并非Java.io或Java.nio的使用手册,也不是如何使用Java.io与Java.nio的技术文档.这里只是尝试比较这两个包,用最简单的方式突出它们的区别和各自的特性.Java.nio提出了 ...
- DOS命令创建以日期为文件名的任务计划TXT文件
因为每天早上都要做计划,所以做了个批处理文件来创建任务计划TXT文件 文件内容展示如下: 2013/07/09 周二 今日任务: 1. 2. 待办任务: 1. 2. 出现问题: 解决办法: 出现问题: ...
- CentOS6.5解决中文乱码与设置字符集
[ CleverCode发表在csdn博客中的原创作品,请勿转载,原创地址:http://blog.csdn.net/clevercode/article/details/46377577] 1)说明 ...
- MapReduce 运行机制
Hadoop中的MapReduce是一个使用简单的软件框架,基于它写出来的应用程序能够运行在由上千个机器组成的大型集群上,并且以一种可靠容错并行处理TB级别的数据集. 一个MapReduce作业(jo ...
- Map 迭代 两种方法
Map 迭代 两种方法 Map<String, String> map=new HashMap<String,String>(); map.put("1", ...
- MAC 环境下 初始化新的mysql root 密码
mac 环境下初始化mysql的root密码 关掉mysql服务,打开系统设置最后的mysql,然后将mysql先关掉 生成一个文件命名mysql-init,文件中放入:一句话,这句话不同版本不一样, ...
- Linux chmod
在Linux中要修改一个文件夹或文件的权限我们需要用到linux chmod命令来做. 语法如下: chmod [who] [+ | - | =] [mode] 文件名 命令中各选项的含义为 u 表示 ...