一、表格按照表头排序

 <!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. MySQL修改root密码的方法总结

    方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass ...

  2. Spring Boot 中使用 Jedis 及 Lettuce的对比

    首先,同样的程序,采用不同方式的Redis连接方式. defautl : 默认,0配置 ,也就是走的是 lettuce 单通道方式.   端口:8081 jedis : 使用Jedis 连接池.    ...

  3. redis哨兵集群环境搭建

    一.哨兵的介绍 哨兵(sentinal)是redis集群架构中非常重要的一个组件,主要功能如下: 集群监控,负责监控redis master和slave进程是否正常工作 消息通知,如果某个redis实 ...

  4. mac操作记录

    1.mac'主目录地址' 类似我的电脑 点桌面空白处按shift+command+C, 双击Macintosh HD图标后就能看见system文件夹 2.做excel表格,下载Microsoft Of ...

  5. Proxy代理模式(结构型模式)

    1.问题 在面向对象系统中,有些对象由于某种原因(比如创建对象的开销很大,或者某些操作需要安全控制,或者需要进程外的访问等),直接访问会给调用者带来麻烦,那么如何在不损失接口透明性的情况下,解决这些麻 ...

  6. asp.net core web 添加角色管理

    新建asp.net core web应用 添加RolesAdminController [Authorize(Roles = "Admin")] public class Role ...

  7. POJ 2083 Fractal 分形题目

    这两天自学了一线算法导论里分治策略的内容,秉着只有真正投入投入编程,才能更好的理解一种算法的思想的想法,兴致勃勃地找一些入门的题来学习. 搜了一下最后把目光锁定在了Poj fractal这一个题上.以 ...

  8. haproxy+keepalived原理特点

    所有的系统,都是先经历一个单台机器搞所有业务的时代,一个程序+一个mysql数据库,就可以满足开发及第一个版本上线的要求.随着,数据的增加以及业务的增长,这些应用就面临一个访问量的扩大以及扩展的问题. ...

  9. docker（三）docker镜像和镜像发布方法

    一.从公网docker hub 拉取image ~ # 搜索docker search centos~ » docker pull centos admin@steven- Using default ...

  10. Maven 入门——Maven 的安装和配置

    1.安装 Windows 环境 Maven 官网下载安装文件 解压到指定目录 配置环境变量(M2_HOME) cmd 输入 mvn -v Mac环境 brew install maven 配置环境变量 ...