JSFiddle - React, Tailwind, and code Playground

by Son Che Dinh

HTML

<body ng-app="orderByExample3">
  <div ng-controller="ExampleController">
  <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre>
  <hr/>
  <button ng-click="sortBy(null)">Set to unsorted</button>
  <hr/>
  <table class="employees">
    <tr>
      <th>
        <button ng-click="sortBy('name')">Name</button>
        <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span>
      </th>
      <th>
        <button ng-click="sortBy('phone')">Phone Number</button>
        <span class="sortorder" ng-show="propertyName === 'phone'" ng-class="{reverse: reverse}"></span>
      </th>
      <th>
        <button ng-click="sortBy('age')">Age</button>
        <span class="sortorder" ng-show="propertyName === 'age'" ng-class="{reverse: reverse}"></span>
      </th>
    </tr>
    <tr ng-repeat="employee in employees">
      <td>{{employee.name}}</td>
      <td>{{employee.phone}}</td>
      <td>{{employee.age}}</td>
    </tr>
  </table>
</div>
</body>

JavaScript

angular.module('orderByExample3', [])
  .controller('ExampleController', ['$scope', 'orderByFilter', function($scope, orderBy) {
    var employees = [
      {name: 'Tam',   phone: '123456',  age: 15},
      {name: 'Quan',   phone: '987612',  age: 20},
      {name: 'Linh',   phone: '321223',  age: 21},
      {name: 'Huan',   phone: '555878',  age: 35},
      {name: 'Khanh',  phone: '551235',  age: 29}
    ];

    $scope.propertyName = 'age';
    $scope.reverse = true;
    $scope.employees = orderBy(employees, $scope.propertyName, $scope.reverse);

    $scope.sortBy = function(propertyName) {
      $scope.reverse = (propertyName !== null && $scope.propertyName === propertyName)
          ? !$scope.reverse : false;
      $scope.propertyName = propertyName;
      $scope.employees = orderBy(employees, $scope.propertyName, $scope.reverse);
    };
  }]);