JSFiddle - React, Tailwind, and code Playground

by Son Che Dinh

HTML

<body ng-app="orderByExample2">
  <div ng-controller="ExampleController">
  <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre>
  <hr/>
  <button ng-click="propertyName = null; reverse = false">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 | orderBy:propertyName:reverse">
      <td>{{employee.name}}</td>
      <td>{{employee.phone}}</td>
      <td>{{employee.age}}</td>
    </tr>
  </table>
</div>
</body>

JavaScript

angular.module('orderByExample2', [])
  .controller('ExampleController', ['$scope', function($scope) {
    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 = employees;

    $scope.sortBy = function(propertyName) {
      $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
      $scope.propertyName = propertyName;
    };
  }]);