一、表格按照表头排序

 <!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. GoLang学习控制语句之switch

    基本结构 相比较 C 和 Java 等其它语言而言,Go 语言中的 switch 结构使用上更加灵活.它接受任意形式的表达式,例如: switch var1 { case val1: ... case ...

  2. 【文档】使用Sphinx + reST编写文档

    0 前言 写文档是开发人员日常工作中的一项重要内容,除了word之外,我更偏爱使用标记语言(Markup Language).使用标记语言,可以利用简单.免费的文本编辑器(记事本,vim, emacs ...

  3. Shell - 简明Shell入门04 - 判断语句（If）

    示例脚本及注释 #!/bin/bash var=$1 # 将脚本的第一个参数赋值给变量var if test $var # test - check file types and compare va ...

  4. 解放双手 | Jenkins + gitlab + maven 自动打包部署项目

    前言 记录 Jenkins + gitlab + maven 自动打包部署后端项目详细过程! 需求背景 不会偷懒的程序员不是好码农,传统的项目部署,有时候采用本地手动打包,再通过ssh传到服务器部署运 ...

  5. C#编程任务: 把工作交给别人并等待其执行完成

    生活中有这样的场景: 我有一件事情需要别人帮忙去办, 但是别人也很忙呀, 所以我只能把任务记载他的任务清单上, 等他一个个扫下来扫到我的并且完成之后再来告诉我. 这其实是一个多线程的问题. 我是线程A ...

  6. Identity Server4学习系列三

    1.简介 在Identity Server4学习系列一和Identity Server4学习系列二之令牌(Token)的概念的基础上,了解了Identity Server4的由来,以及令牌的相关知识, ...

  7. 全网最详细的hive-site.xml配置文件里如何添加达到Hive与HBase的集成，即Hive通过这些参数去连接HBase（图文详解）

    不多说,直接上干货! 一般,普通的情况是 全网最详细的hive-site.xml配置文件里添加<name>hive.cli.print.header</name>和<na ...

  8. php -- 4种嵌入标记

    ----- 001-tags.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv="c ...

  9. 【原创】用JQury来制作星星打分特效功能

    前言 常常我们看到一些评论,星星打分,今天我们就用Jq代码来实现,看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图 代码 <!DOCTYPE htm ...

  10. mycat ER 分片表

    <table name="order" dataNode="dn$1-32" rule="mod-long"> <chil ...