To sort the data in Angular
1. Use orderBy filter
    {{ orderBy_expression | orderBy : expression : reverse}}

Example : ng-repeat="employee in employees |
orderBy:'salary':false"

2. To sort in ascending order, set reverse to false
3. To sort in descending order, set reverse to true
4. You can also use + and - to sort in ascending and descending order respectively
     Example : ng-repeat="employee in employees |
orderBy:'+salary'"

 Let us understand sorting data with an example.

The dropdownlist shows the columns and the direction we want to sort
When a dropdownlist item is selected, the table data should be sorted by the selected column

Script.js :
The controller function builds the model. Also sortColumn property is
added to the $scope object. Notice sortColumn property is initialized to
name. This ensures that the data is sorted by name column in ascending
order, when the form first loads

 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";

        });

HtmlPage1.html :
The select element, has the list of columns by which the data should be
sorted. + and - symbols control the sort direction. When the form
initially loads notice that the data is sorted by name column in
ascending order, and name option is automatically selected in the select
element. Notice the orderBy filter is using the sortColumn property
that is attached to the $scope object. When the selection in the select
element changes, the sortColumn property of the $scope object will be
updated automatically with the selected value, and in turn the updated
value is used by the orderBy filter to sort the data.

 <!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">

        Sort By :

        <select ng-model="sortColumn">

            <option value="name">Name ASC</option>

            <option value="+dateOfBirth">Date of Birth ASC</option>

            <option value="+gender">Gender ASC</option>

            <option value="-salary">Salary DESC</option>

        </select>

        <br /><br />

        <table>

            <thead>

                <tr>

                    <th>Name</th>

                    <th>Date of Birth</th>

                    <th>Gender</th>

                    <th>Salary</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="employee in employees | orderBy:sortColumn">

                    <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;

}

Part 9 Sorting data in AngularJS的更多相关文章

  1. SQL Fundamentals：Restricting and Sorting Data限制和排序数据（FROM-WHERE-SELECT-ORDER BY）

    SQL Fundamentals || Oracle SQL语言 控制操作的显示列:基本的SELECT语句 控制行:限定查询和排序显示 分组统计查询 限定查询:WHERE字句 排序显示:ORDER B ...

  2. [译]AngularJS sercies - 获取后端数据

    原文:ANGULARJS SERVICES – FETCHING SERVER DATA $http是AngularJS内置的服务,能帮助我们完成从服务端获数据.简单的用法就是在你需要数据的时候,发起 ...

  3. [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

    写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...

  4. AngularJs 基础（60分钟入门）

    AngularJS 是一个创建富客户端应用的JavaScript MVC框架.你仍然需要具有服务端后台,但大多数的用户交互逻辑将放到客户端上处理.它可以创建单页的应用程序,一个页面的应用仅仅需要HTM ...

  5. AngularJs 基础（60分钟入门） (转)

    AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会 ...

  6. AngularJS学习笔记3

    6.AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. ng-controller 指 ...

  7. Lerning Entity Framework 6 ------ Inserting, Querying, Updating, and Deleting Data

    Creating Entities First of all, Let's create some entities to have a test. Create a project Add foll ...

  8. [译]AngularJS Services 获取后端数据

    原文:ANGULARJS SERVICES – FETCHING SERVER DATA $http是AngularJS内置的服务,能帮助我们完成从服务端获数据.简单的用法就是在你需要数据的时候,发起 ...

  9. Getting Started with Django Rest Framework and AngularJS

    转载自:http://blog.kevinastone.com/getting-started-with-django-rest-framework-and-angularjs.html A ReST ...

随机推荐

  1. Java常见排序算法之冒泡排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  2. HDU 4941 Magical Forest 【离散化】【map】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4941 题目大意:给你10^5个点.每一个点有一个数值.点的xy坐标是0~10^9.点存在于矩阵中.然后 ...

  3. Android Compatibility package 兼容性开发套件

    我们认为Android 3.0平板电脑操作系统在美国时间2011年2月22日的正式推出,对于Android手机应用程序开发者所象征的意涵是: 之前大家所开发过的Android手机应用,除了可以在And ...

  4. [AngularJS] Directive Definition Objects (DDO)

    This function that we just set up is what's called a link function, and it's actually a very small p ...

  5. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  6. GIT分支管理是一门艺术

    英文原文:http://www.nvie.com/posts/a-successful-git-branching-model/ 原文作者:Vincent Driessen 本文经Linux大棚博主总 ...

  7. GAC(Global Assembly Cache)注册/卸载 dll

    当发现有多个解决方案引用一个dll时,为了不重复引用所以将.net的一个dll注册到GAC中去. gacutil.exe. 记得使用管理员权限打开 开始菜单-Microsoft Visual Stud ...

  8. Cannot instantiate the type HttpClient问题

    看自己动手写爬虫,没想到一上来就跪了. 里面提到用的jar包是apache的http客户端开源项目---HttpClient 就去官网下载了一个版本4.3 当按书上代码敲时 HttpClient ht ...

  9. onkeyup，onkeydown和onkeypress

    如下一段代码: <html> <script>  function checkForm(){   if(event.keyCode ==13){     event.keyCo ...

  10. structs 2 学习总结（一）

      转发请注明出处 1.页面传值. 传值 前台 <s:form action="login1">//action 名字 需要在structs配置 用户<s:tex ...