实现公式：{{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. 4 hbase表结构 + hbase集群架构及表存储机制

      本博文的主要内容有    .hbase读取数据过程 .HBase表结构 .附带PPT http://hbase.apache.org/ 读写的时候,就需要用hbase了,换句话说,就是读写的时候. ...

  2. HTML5 Security Cheatsheet使用说明

    1.URL: https://html5sec.org/ 2.通过点击如图button(也可点击其他:xss firefox)那行的button可以搜索所有button的Cheatsheet,查看都有 ...

  3. AIX操作oracle

    oracle:出现下述错误,无法连接用户. ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist ...

  4. Linux下安装 TestLink常见问题解决方法

    Read/write permissions For security reason we suggest that directories tagged with [S] on following ...

  5. soapUI的使用

    首先下载soapUI下载地址在网上能够搜的到  windows下载这个soapUI-x32-3_5.exe(中间的数字是版本,能够下载最新的,这个已经有了JMS的測试功能)  首先得有一个webser ...

  6. 刚才建立一个 swift 中文讨论社区，欢迎大家參与讨论

    http://www.chinaswift.me 主要目的是收集 swift学习资源

  7. Android 颜色渲染(三) Shader颜色渲染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 相信看过在上一篇中提到的三篇文章后,大家已经对颜色处理方面有更深的体会. 之前讲到颜色渐变的效果, 具体怎么做呢,这就需要应用颜色渲染. 首先要介 ...

  8. leetcode-1 Two Sum 找到数组中两数字和为指定和

     问题描写叙述:在一个数组(无序)中高速找出两个数字,使得两个数字之和等于一个给定的值.如果数组中肯定存在至少一组满足要求. <剑指Offer>P214(有序数组) <编程之美& ...

  9. STL 六大组件 功能与运用

    STL 提供六大组件,彼此可以组合套用: 1 容器(containers):各种数据结构,如vector,list,deque,set,map,用来存放数据,从实现的角度来看,STL容器是一种clas ...

  10. switch-case参数类型

    switch语句用法: 0. switch语句由一个控制表达式和多个case标签组成 1. switch控制表达式支持的类型有byte.short.char.int.enum(JDK5).String ...