Angularjs "Order by" filter on Header click

Sorting the table on header click

by mohitagrawalmca

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>

CSS

th {
  border: 1px solid;
}

td {
  border: 1px solid;
}

table {
  border: 1px solid;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  
  border-bottom: 7px solid black;
  display:inline-block;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  
  border-top: 7px solid black;
  display:inline-block;
}

JavaScript

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

  }

});