一、表格按照表头排序

 <!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. Flash 0day漏洞(CVE-2018-4878)复现

    该漏洞影响 Flash Player 当前最新版本28.0.0.137以及之前的所有版本,而Adobe公司计划在当地时间2月5日紧急发布更新来修复此漏洞. 本文作者:i春秋作家——F0rmat 前言 ...

  2. [转]Express框架

    http://javascript.ruanyifeng.com/nodejs/express.html

  3. office2013安装与卸载

    一.office2013卸载不干净,重新安装的时候就会报错.下面是博主卸载的步骤: 第一步:下载office官方卸载工具 ,链接:http://pan.baidu.com/s/1nvuoEYd 密码: ...

  4. Bash数组

    1. 数组申明 declare -a array 2. 数组赋值 #法1 array=(var1 var2 var3 ... varN) #法2 array=([]=var1 []=var2 []=v ...

  5. Chapter 2 Open Book——13

    "People in this town," he muttered. "Dr. Cullen is a brilliant surgeon who could prob ...

  6. 利用Django构建web应用及其部署

    注:很久之前就有了学习Django的想法,最近终于有机会做了一次尝试.由于Django的详细教程很多,我在这里就不再详述了,只是将整个开发流程以及自己在学习Django中的一些思考记录在此. Syst ...

  7. MySQL中的三中循环 while 、 loop 、repeat 求 1~n 的和

    -- MySQL中的三中循环 while . loop .repeat 求 1-n 的和 -- 第一种 while 循环 -- 求 1-n 的和/* while循环语法:while 条件 DO 循环体 ...

  8. 自我总结 (三) --(Java Web学习)

    自我完善的过程就是在不断的自我总结不断的改进. 在前的近半个月里,我们经过了考试,也开始了java web的项目. 先看看这次的考试.考完之后我就觉得有点不对劲的,结果 结果真的是一塌糊涂.上周五的时 ...

  9. ArcGIS紧凑型切片读取与应用3-紧凑型批量转分散型(附源码)

    1.前言 上篇介绍了webgis动态加载解析紧凑型切片的例子,现在我们使用逆向思维实现紧凑型切片转分散型切片,在实际工作中很有用处,紧凑型切片易于拷贝,但读取只有部署到Arcgis Server才行. ...

  10. window如何一键关闭所有进程程序

    1.桌面创建一个快捷方式,点击鼠标右键跳出的菜单=> 新建=>快捷方式 2. 在“请键入对象的位置(T)”下方的文本框中输入: taskkill /F /FI "USERNAME ...