Order By filter in Angularjs

Order By is used sort an array based on provided expression.

Syntax

   <tr  ng-repeat=arr[] | orderBy : expression : reverse />

Example:

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }];
  $scope.StdDetails = StdDetails;
});

HTML

<div ng-controller="StdController">
  <div>Display in Ascending order</div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:'StdName'">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
  <hr/>
  <div>Display in <strong>descending order</strong> By using <strong>(-) minus sign</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:'-StdName'">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>

  </table>
  <hr/>
  <div>Display in <strong>descending order</strong> By using <strong>reverse arguments</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:'StdName':true">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
</div>

OUTPUT

I created a fiddle here with a demo:
https://jsfiddle.net/5wnh2dyp/

Sorting objects array in descending/ascending order in javascript

If you want to orderby in javascript file not in HTML.

Example:

JavaScript:

var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope, $filter) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }];
  var Dscfiltered = $filter('orderBy')(StdDetails, 'StdName', 1);
  $scope.StdDetailsDsc = Dscfiltered;
  var Ascfiltered = $filter('orderBy')(StdDetails, 'StdName', 0);
  $scope.StdDetailsAsc = Ascfiltered;
});

HTML
<div ng-controller="StdController">
  <div>Display in <strong>dscending order</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetailsDsc">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
  <hr/>
  <div>Display in <strong>ascending order</strong></div>
  <table>
    <tr>
      <th>Student Name </th>
      <th>Class</th>
    </tr>
    <tr ng-repeat="std in StdDetailsAsc">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
</div>

 Screen capture of JavaScript file:


I created a fiddle here with a demo:

https://jsfiddle.net/fat0h73o

Dynamic sorting on table header click in Angular

By using of angularjs orderBy filter to sort table data dynamic or user header click event.

Example:
Java Script:

var myApp = angular.module('myApp', []);
myApp.controller('StdController', function($scope) {
  var StdDetails = [{
    StdName: "Mohit",
    StdClass: "MCA"
  }, {
    StdName: "Amit",
    StdClass: "BSC"
  }];
  $scope.StdDetails = StdDetails;
  $scope.SortcolumnName = "StudentName";
  $scope.reverseSort = false;
  $scope.OrderOf = "descending";
  $scope.SortTable = function(colName) {
    $scope.reverseSort = (colName == $scope.SortcolumnName) ? !$scope.reverseSort : false;
    $scope.SortcolumnName = colName;
    $scope.OrderOf = $scope.reverseSort ? "ascending" : "descending";
  }
  $scope.cssHeaderSort = function(colName) {
    if (colName == $scope.SortcolumnName) {
      return $scope.reverseSort ? "arrow-up" : "arrow-down";
    }
    return '';
  }

});

HTML
<div ng-controller="StdController">
  <div>Display in<b> {{OrderOf}} order</b></div>
  <hr/>
  <table>
    <tr>
      <th ng-click="SortTable('StudentName')">Student Name
        <div ng-class="cssHeaderSort('StudentName')"></div>
      </th>
      <th ng-click="SortTable('Class')">Class
        <div ng-class="cssHeaderSort('Class')"></div>
      </th>
    </tr>
    <tr ng-repeat="std in StdDetails | orderBy:SortcolumnName:reverseSort ">
      <td>{{std.StdName}} </td>
      <td>{{std.StdClass}}</td>
    </tr>
  </table>
</div>

I created a fiddle here with a demo:
https://jsfiddle.net/hxktbcms/