一、表格按照表头排序

 <!doctype html>

 <html ng-app="a3_4">

 <head>

     <title>表头排序</title>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

 </head>

 <body>

 <div ng-controller="c3_4">

     <table class="table table-responsive" >

         <thead>

             <tr>

                 <th >序号</th>

                 <th ng-click="title='name';desc=!desc">

                     姓名

                     <span>

                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>

                     </span>

                 </th>

                 <th ng-click="title='sex';desc=!desc">

                     性别

                      <span>

                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>

                     </span>

                 </th>

                 <th ng-click="title='age';desc=!desc">

                     年龄

                      <span>

                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>

                     </span>

                 </th>

                 <th ng-click="title='score';desc=!desc">

                     分数

                      <span>

                         <i ng-class="{true: 'glyphicon glyphicon-sort-by-attributes', false: 'glyphicon glyphicon-sort-by-attributes-alt'}[(desc == 0)]"></i>

                      </span>

                 </th>

             </tr>

         </thead>

         <tbody>

             <tr ng-repeat="stu in data | orderBy : title : desc">

                 <td>{{$index+1}}</td>

                 <td>{{stu.name}}</td>

                 <td>{{stu.sex}}</td>

                 <td>{{stu.age}}</td>

                 <td>{{stu.score}}</td>

             </tr>

         </tbody>

     </table>

 </div>

 <script type="text/javascript">

     var a3_4 = angular.module('a3_4', []);

     a3_4.controller('c3_4', ['$scope', function ($scope) {

         $scope.bold = "bold";

         $scope.title = 'score';

         $scope.desc = 0;

         $scope.data = [

             { name: "张明明", sex: "女", age: 24, score: 95 },

             { name: "李清思", sex: "女", age: 27, score: 87 },

             { name: "刘小华", sex: "男", age: 28, score: 86 },

             { name: "陈忠忠", sex: "男", age: 23, score: 97 }

         ];

     }])

 </script>

 </body>

 </html>

二、备注

备注：该方法主要是实现了表格按照表头字段进行排序功能，可升序排列，也可以降序排列，默认情况下是升序排列即 $scope.desc = 0情况。

三、运行截图

AngularJS table 按照表头字段排序功能（升序和降序）的更多相关文章

  1. python 根据两个字段排序, 一个升序, 一个降序

    from collections import Counter c = Counter(input()) l=sorted(c.items(), key=lambda s:(-s[], s[])) ] ...

  2. python-冒泡排序，升序、降序

    冒泡排序 这个算法的名字由来是因为越大的元素会经交换慢慢浮'到数列的顶端. 冒泡排序的基本思想:重复走访要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来,直到没有再需要交换,完成排序 ...

  3. C语言链表中数组实现数据选择排序，升序、降序功能主要难点

    链表排序讲解: head指针指向链表的头结点,是找到整个链表的唯一依据,如果head指针丢失,整个链表就找不到了. head存储的是第一个节点的地址,head->next存储的是第二个节点的地址 ...

  4. iOS之数组的排序（升序、降序及乱序）

    #pragma mark -- 数组排序方法(升序) - (void)arraySortASC{ //数组排序 //定义一个数字数组 NSArray *array = @[@(3),@(4),@(2) ...

  5. Java排序之升序与降序

    以前在学校学排序的时候,总是自己写排序的代码,真正到工作中,直接使用java提供的排序方法,但最近发现行业默认的和学习时有些不一样. 以前总是在进行排序时如果前边的数字和后边数字的差为负则交换两个数字 ...

  6. java List 排序，升序，降序

    import java.util.*; public class EntrySets { public static void main(String[] args) { Map<Object, ...

  7. 通过orderby关键字，LINQ可以实现升序和降序排序。LINQ还支持次要排序。

    通过orderby关键字,LINQ可以实现升序和降序排序.LINQ还支持次要排序. LINQ默认的排序是升序排序,如果你想使用降序排序,就要使用descending关键字. static void M ...

  8. DataGridView使用技巧十三：点击列头实现升序和降序排序

    DataGridView 列有三种排序模式.每一列的排序模式是通过该列的 SortMode 属性指定的,该属性可以设置为以下的 DataGridViewColumnSortMode 枚举值之一. Da ...

  9. 【转】java comparator 升序、降序、倒序从源码角度理解

    原文链接:https://blog.csdn.net/u013066244/article/details/78997869 环境jdk:1.7+ 前言之前我写过关于comparator的理解,但是都 ...

随机推荐

  1. Android逆向——smali复杂类解析

    i春秋作家:HAI_ 之前在Android逆向——初识smali与java类中讲解了基本的HelloWorld和简单类.这节课就要进一步深入.如果能够耐下心来分析一定会有所收获.——写给自己和后来人. ...

  2. 转---如何让前端更安全？——XSS攻击和防御详解

    前言 平时很少关注安全这块的技术,曾经也买过一本<Web前端黑客技术揭秘>但至今还没翻过,尴尬.今天的早读文章由腾讯优测@小吉带来的分享. 正文从这开始~ 最近深入了解了一下XSS攻击.以 ...

  3. 【dpdk】使用libpcap-PMD驱动收发包

    ref: Dpdk programmer’s guide 1.  概述 dpdk不仅提供针对物理和虚拟网卡的pmd驱动(Poll Mode Drivers),还提供两个纯软件的pmd驱动,libpca ...

  4. postgresql-pgbench(转)

    pgbench测试:   pg9.6.2的pgbench报错: [thunisoft@localhost ~]$ pgbench -S -c 8 -t 60 pgbenchdb Segmentatio ...

  5. Golang 中哪些值是不可以寻址的

    不可以寻址, 指的是不能通过&获得其地址. golang中不能寻址的可以总结为:不可变的,临时结果和不安全的.只要符合其中任何一个条件,它就是不可以寻址的. 具体为: 常量的值. 基本类型值的 ...

  6. vue-cli2 构建速度优化

    对于使用 vue-cli 脚手架创建的前端项目,编译发布几乎是必需操作,有的编译只需要几秒钟,快如闪电,有的却需要好几分钟,慢如蜗牛.如果是线上进行热修复,那更是分秒必争,网页响应的速度直接影响了用户 ...

  7. npm 安装 cannot find module

    window7安装module出现 Connot find module 'xxx' 解决办法: 添加环境变量命名为:NODE_PATH 设置值为:%AppData%\npm\node_modules ...

  8. JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类： JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏

    原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...

  9. Android入门学习总结

    1.Manifest.xml是程序运行时读取的文件,是核心的配置文件:也是从中读取Activity 2.主要的代码文件存放在MainActivity.java,里面固定会有onCreate函数会通过s ...

  10. Eclipse \ MyEclipse \Scala IDEA for Eclipse里如何将控制台console输出的过程记录全程保存到指定的文本文件（图文详解）

    不多说,直接上干货! 问题详情 运行Java程序的时候,控制台输出过多,或者同时运行多个Java程序,输出结果一闪而过的时候,可以考虑将将控制台输出,改为输出到文本文件.无须修改Java代码,引入流这 ...