实现公式：{{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 实现排序功能的更多相关文章

  1. AngularJS table 按照表头字段排序功能（升序和降序）

    一.表格按照表头排序 <!doctype html> <html ng-app="a3_4"> <head> <title>表头排序 ...

  2. 禁用datagridview中的自动排序功能

    把datagridview中的自动排序功能禁用自己收集的两种方法,看看吧①DataGridView中的Columns属性里面可以设置.进入"EditColumns"窗口后,在相应的 ...

  3. ListBox实现拖拽排序功能

    1.拖拽需要实现的事件包括: PreviewMouseLeftButtonDown LBoxSort_OnDrop 具体实现如下: private void LBoxSort_OnPreviewMou ...

  4. 简单实现Redis缓存中的排序功能

    1.在实现缓存排序功能之前,必须先明白这一功能的合理性.不妨思考一下,既然可以在数据库中排序,为什么还要把排序功能放在缓存中实现呢?这里简单总结了两个原因:首先,排序会增加数据库的负载,难以支撑高并发 ...

  5. Java实现中文字符串的排序功能

    package test; /** * * @Title 书的信息类 * @author LR * @version 1.0 * @since 2016-04-21 */ public class B ...

  6. MYSQL-实现ORACLE- row_number() over(partition by ) 分组排序功能

    MYSQL-实现ORACLE- row_number() over(partition by ) 分组排序功能 由于MYSQL没有提供类似ORACLE中OVER()这样丰富的分析函数. 所以在MYSQ ...

  7. nls_sort和nlssort 排序功能介绍

    nls_sort和nlssort 排序功能介绍 博客分类: oracle   ALTER SESSION SET NLS_SORT=''; 排序影响整个会话 Oracle9i之前,中文是按照二进制编码 ...

  8. [WPF]ListView点击列头排序功能实现

    [转]   [WPF]ListView点击列头排序功能实现 这是一个非常常见的功能,要求也很简单,在Column Header上显示一个小三角表示表示现在是在哪个Header上的正序还是倒序就可以了. ...

  9. MVC5 Entity Framework学习参加排序、筛选和排序功能

    上一篇文章实现Student 基本的实体CRUD操作.本文将展示如何Students Index页添加排序.筛选和分页功能. 以下是排序完成时.经过筛选和分页功能截图,您可以在列标题点击排序. 1.为 ...

随机推荐

  1. js判断是否为手机浏览器

    JS判断手机浏览器 判断原理: JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根 ...

  2. UML 的基本组成

    UML 是由UML构造块.规则.通用机制三部分组成的.而UML构造块由建模元素(事物).关系和图组成. 建模元素 建模元素是对模型中最具有代表性的成分的抽象.一般情况下,将建模元素分为结构元素.行为元 ...

  3. 用bootstrap结合php搭建MIS系统框架【转载】

    bootstrap目前比较火,抽空简单了解一下 官方介绍:Bootstrap, from Twitter基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架及交互组件集 http://t ...

  4. python 3Des 加密

    import hashlib; from Crypto.Cipher import DES3 import base64 def create_key(sk): r=hashlib.md5(sk).d ...

  5. Qt 学习之路：模型-视图高级技术

    PathView PathView是 QtQuick 中最强大的视图,同时也是最复杂的.PathView允许创建一种更灵活的视图.在这种视图中,数据项并不是方方正正,而是可以沿着任意路径布局.沿着同一 ...

  6. 如何进去bios设置

    1.BIOS是英文"Basic Input Output System"的缩略语,直译过来后中文名称就是"基本输入输出系统".其实,它是一组固化到计算机内主板上 ...

  7. PHP中的循环while、do...while、for、foreach四种循环。

    php中的while循环,循环执行代码块制定的次数,或者当指定的条件为真时循环执行代码块. 在我们编写代码是时候,我们经常需要一块代码块重复执行多次.我们就可以使用while循环语句来完成这个任务. ...

  8. java开发webservice的几种方式(转载)

    webservice的应用已经越来越广泛了,下面介绍几种在Java体系中开发webservice的方式,相当于做个记录. 1.Axis2方式 Axis是apache下一个开源的webservice开发 ...

  9. js的MVC结构设计

    基于jquery的Deferred,设计出如下MVC架构. 模型model interface.js interface: function(userid){ var dtd = $.Deferred ...

  10. 分享一下自己在用的CSS样式重置代码

    通过借鉴网上大牛们的经验和自己在工作中碰到的一些问题,总结出了这些比较常用的CSS样式重置的代码: @charset "utf-8"; /* 防止用户自定义背景颜色对网页的影响,添 ...