JSFiddle - React, Tailwind, and code Playground

by mohitagrawalmca

HTML

<div ng-controller="StdController">
<div>Display in  <strong>ascending order </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>(-) 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>

CSS

th {
  border: 1px solid;
}

td {
  border: 1px solid;
}

table {
  border: 1px solid;
}

JavaScript

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