Here is what we want to do
1. The data should be sorted when the table column header is clicked
2.
The user should be able to sort in both the directions - ascending and
descending. Clicking on the column for the first time should sort the
data in ascending order. Clicking on the same column again should sort
in descending order.
3. An icon should be displayed next to the column showing the sort column and direction


Script.js : The controller function in the script does the following

  • Sets up the model
  • sortColumn and reverseSort properties
    are attached to the $scope object. These 2 properties are used to
    control the column by which the data should be sorted and the sort
    direction.
  • sortColumn is set to name and reverseSort is
    set to false. This will ensure that when the form is initially loaded,
    the table data will be sorted by name column in ascending order.
  • Depending on the column header the user has clicked, sortData() function sets the sortColumn and reverseSort property values.
  • Based on the sort column and the sort direction, getSortClass()
    function returns the CSS class name to return. The CSS class controls
    the sort icon that will be displayed next to the sort column.
 var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope) {

            var employees = [
                {
                    name: "Ben", dateOfBirth: new Date("November 23, 1980"),
                    gender: "Male", salary: 55000
                },
                {
                    name: "Sara", dateOfBirth: new Date("May 05, 1970"),
                    gender: "Female", salary: 68000
                },
                {
                    name: "Mark", dateOfBirth: new Date("August 15, 1974"),
                    gender: "Male", salary: 57000
                },
                {
                    name: "Pam", dateOfBirth: new Date("October 27, 1979"),
                    gender: "Female", salary: 53000
                },
                {
                    name: "Todd", dateOfBirth: new Date("December 30, 1983"),
                    gender: "Male", salary: 60000
                }
            ];

            $scope.employees = employees;
            $scope.sortColumn = "name";
            $scope.reverseSort = false;

            $scope.sortData = function (column) {
                $scope.reverseSort = ($scope.sortColumn == column) ?
                    !$scope.reverseSort : false;
                $scope.sortColumn = column;
            }

            $scope.getSortClass = function (column) {

                if ($scope.sortColumn == column) {
                    return $scope.reverseSort
                      ? 'arrow-down'
                      : 'arrow-up';
                }

                return '';
            }
        });

HtmlPage1.html : sortData() function is called when any table header is clicked, passing the name of the column by which the data should be sorted. The div element's, ng-class directive calls getSortClass() function, which returns the CSS class to be applied. The CSS displays the UP or DOWN arrow depending on the sort direction. Finally, with the orderBy filter sortColumn and reverseSort properties of the $scope object are used to control the column by which the data should be sorted and the sort direction.

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
    <link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        <table>
            <thead>
                <tr>
                    <th ng-click="sortData('name')">
                        Name <div ng-class="getSortClass('name')"></div>
                    </th>
                    <th ng-click="sortData('dateOfBirth')">
                        Date of Birth <div ng-class="getSortClass('dateOfBirth')"></div>
                    </th>
                    <th ng-click="sortData('gender')">
                        Gender <div ng-class="getSortClass('gender')"></div>
                    </th>
                    <th ng-click="sortData('salary')">
                        Salary <div ng-class="getSortClass('salary')"></div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees | orderBy:sortColumn:reverseSort">
                    <td> {{ employee.name }} </td>
                    <td> {{ employee.dateOfBirth | date:"dd/MM/yyyy" }} </td>
                    <td> {{ employee.gender }} </td>
                    <td> {{ employee.salary  }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Styles.css : CSS styles to make the form look pretty.

 body {
    font-family: Arial;
}

table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    padding: 5px;
}

th {
    border: 1px solid black;
    padding: 5px;
    text-align: left;
    /*cursor property displays hand symbol
        when hovered over the th element*/
    cursor: pointer;
}

/*This class displays the UP arrow*/
.arrow-up {
     width:;
     height:;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-bottom: 10px solid black;
     display:inline-block;
}

/*This class displays the DOWN arrow*/
.arrow-down {
     width:;
     height:;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 10px solid black;
     display:inline-block;

}

Part 10 AngularJS sort rows by table header的更多相关文章

  1. Clone table header and set as the first element, and replace header&#39;s th with td

    Clone table header and replace header's th with td var tableHeaderRow = '#tableId tbody tr:nth-child ...

  2. 在SSRS的每一页重复显示table header

    现在在做一个关于SSRS报表展示的项目,但是我困顿在如何在table的每一页让table header重复显示.因为我在table属性中勾选了"Report header columns o ...

  3. Creating HTML table with vertically oriented text as table header 表头文字方向

    AS an old question, this is more like info or reminder about vertical margin or padding in % that ta ...

  4. Ubuntu 14.10 下sort,uniq,cut,wc命令详解

    sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些文件连接起来,并当作一个文件进行排序. sort语法 ...

  5. jQuery复制table header到表格的最下面

    为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现: 1 2 3 4 5 var $tfoot = $(''); $($('t ...

  6. 夺命雷公狗—angularjs—10—angularjs里面的内置函数

    我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...

  7. 【从翻译mos文章】不再用par file如果是,export or import 包含大写和小写表名称表

    不再用par file如果是,export or import 包含大写和小写表名称表 参考原始: How to Export or Import Case Sensitive Tables With ...

  8. DataTableHelper

    public class DataTableHelper { /// <summary> /// 给DataTable增加一个自增列 /// 如果DataTable 存在 identity ...

  9. oracle之 Oracle LOB 详解

    一.  官方说明 Oracle 11gR2 文档: LOB Storage http://download.oracle.com/docs/cd/E11882_01/appdev.112/e18294 ...

随机推荐

  1. [NHibernate]存储过程的使用(二)

    目录 写在前面 文档与系列文章 创建对象 更新对象 总结 写在前面 上篇文章介绍了如何使用MyGeneration代码生成器生成存储过程,以及nhibernate中通过存储过程删除数据的内容,这篇文章 ...

  2. Windows上帝模式,上帝应该就是这样使用Windows的

    Windows上帝模式(Windows Master Control Panel)由来已久,最早是从Win7优化大湿里看到的一个选项,开启后在桌面生成一个图标,点进去后里面包含了几乎全部Windows ...

  3. Python时间处理之time模块

    1.time模块简介 time模块提供各种操作时间的函数  说明:一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00:00以秒计算的偏移量),时间戳是惟一 ...

  4. WPF操作ini 文件的读写示例

    /// <summary> /// IniFiles 的摘要说明. /// 示例文件路径:C:\file.ini /// [Server] //[*] 表示缓存区 /// name=loc ...

  5. CentOS下yum安装VNCserver

    VNC全称是Virtual Network Computing,属于远程控制类软件.其优点是支持跨操作系统的远程图形化控制.在日常工作中,服务器常常是存在机房,不可能每次需要图形界面操作就跑到机房,因 ...

  6. chrom,firefox,ie不能上网,百度浏览器却可以。。。

    chrome和ie提示DNS查找失败,但是百度浏览器没任何问题,这是什么情况... 尝试很多方法后无用,命令行执行很多命令,无用, 试一下阿里的 DNS: 首选:223.5.5.5备用:223.6.6 ...

  7. 建立IP6隧道

    某站点又开始全站Free了,是否还在为在家上不了IPv6站点而苦恼呢?本教程适用于路由后的windows设备,即ip地址为内网地址通过本教程设置,可实现windows设备获得ipv6地址,以访问IPv ...

  8. Js的History对象

    History回顾 window.history表示window对象的历史记录 window.history的简单回顾 历史记录中前进/后退,移动到指定历史记录点 window.history.bac ...

  9. MySQL学习笔记(3) - 查询服务器版本,当前时间,当前用户

    SELECT VERSION(); --显示当前服务器版本 SELECT NOW(); --显示当前日期时间 SELECT USER(); --显示当前用户 MySQL中语句规范: 1.关键字和函数名 ...

  10. 精通CSS+DIV基础总结(二)

    上一篇我们已经总结了部分CSS+DIV相关知识,这篇我们接着总结,从下边几个方面学习一下: 一,我们看如何设置网页的背景,顾名思义背景可以通过颜色和图片来设置,下边我们看一下如何设置: 颜色的设置非常 ...