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.为 ...
随机推荐
- Ural-1018 Binary Apple Tree(树形dp+分组背包)
#include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...
- B和B+树学习笔记
二叉树 如果数据都在内存中,我们就用平衡二叉查找树即可,这样效率最高. 在前面的文章中我使用过红黑树(大致平衡的二叉查找树),500万节点时,搜索的深度可以达到50,也就是需要50次指针操作才能获取到 ...
- html,shtml和htm的区别
SHTML和HTML的区别,如果用一句话来解释就是:SHTML 不是HTML而是一种服务器 API,shtml是服务器动态产成的html. 虽然两者都是超文本格式,但shtml是一种用于SSI技术的文 ...
- (二)Eclipse 快捷键
编辑 Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等)Ctrl+Shift+F 格式化当前代码Ctrl+Shift+M 添加类的i ...
- Oracle char 查询问题
近期碰到一个问题,数据库有个字段设置类型是char(2),然后数据库保存的数据位1,当使用hibernate 查询时 我使用query.setString("permissionLevel& ...
- Android 颜色渲染(十) ComposeShader组合渲染
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] Android 颜色处理(十) ComposeShader组合渲染 public ComposeShader(Shader sh ...
- 10个精妙的Java编码最佳实践
这是一个比Josh Bloch的Effective Java规则更精妙的10条Java编码实践的列表.和Josh Bloch的列表容易学习并且关注日常情况相比,这个列表将包含涉及API/SPI设计中不 ...
- sql_mode :(STRICT_TRANS_TABLES与STRICT_ALL_TABLES 区别)
http://blog.csdn.net/wulantian/article/details/8905573 http://dev.mysql.com/doc/refman/5.7/en/sql-mo ...
- 支付宝手机网站支付流程(Node实现)
前言 公司M站要接入支付宝,借机研究了一下支付宝的支付流程.毕竟,只有公司才能拿到支付接口权限. 主要参考文档: https://doc.open.alipay.com/doc2/detail?tre ...
- PHP利用超级全局变量$_GET来接收表单数据。
我们在linux上用 touch php_get.html php_get.php创建两个文件. php_get.html文件的代码如下: <!doctype html> <html ...