一、表格按照表头排序

 <!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. C#6.0语言规范(六) 转换

    转换能够被视为是一个特定类型的表达式.转换可能会导致给定类型的表达式被视为具有不同的类型,或者它可能导致没有类型的表达式获取类型.转换可以是隐式或显式的,这决定了是否需要显式转换.例如,从类型int到 ...

  2. 【AWK】：常用总结

    单机文本数据处理,常用AWK,总结一下AWK最常用的要点,备忘备查. 1.What is AWK(1)Aho.Weinberger.Kernighan三位发明者名字首字母:(2)一个行文本处理工具: ...

  3. poi 读取使用 Strict Open XML 保存的 excel 文档

    poi 读取使用 Strict Open XML 保存的 excel 文档 某项目有一个功能需要读取 excel 报表内容,使用poi读取时报错: 具体错误为: org.apache.poi.POIX ...

  4. odoo开发笔记 -- 日常开发注意点小节

    onchange depends区别 视图字段增加readonly属性

  5. centos7.2 部署zabbix 3.2.7

    centos7.2 部署zabbix 3.2.7[zabbix@zabbixServer ~]$ cat /etc/redhat-release CentOS Linux release 7.2.15 ...

  6. MySql中插入乱码问题解决

    今天在使用Java写入数据库时候,发现Insert语句和Update语句在执行过后,数据库中中文显示的是“??”,经过一番查阅,其中关键的问题在于编码格式是否统一. 其中创建表时候,每个关键字的格式都 ...

  7. php -- 连接Mysql 数据库

    ----- 022-mysql.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  8. JavaScript -- Enumerator

    -----022-Enumerator.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...

  9. 【教程向】——基于hexo+github搭建私人博客

    前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...

  10. 【java初探】——格式化字符串

    String 类的静态方法format()方法用于创建格式化字符串,format()方法有两种重载形式: format(String fromat,Object...args) 该方法使用指定的格式字 ...