Как я могу разрешить сортировку по таблице данных?

Question

У меня есть таблица, в которую я зацикливаю данные.Я хотел бы добавить сортировку в заголовок таблицы.Я следовал примеру, который нашел, но, похоже, он не фильтрует таблицу.

Мой компонент HTML:

    <h5 class="table-title">{{title}}</h5>
<table>
 <thead>
    <tr>
        <td ng-click="">Qty</td>
        <td>
            <a href="#" id="nameSort" ng-click="sortType = 'name'; sortReverse = !sortReverse">Name</a>
            <span ng-show="sortType == 'name' && !sortReverse" class="fas fa-sort-down"></span>
            <span ng-show="sortType == 'name' && sortReverse" class="fas fa-sort-up"></span>
        </td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="(name, available) in availability.mappables[0].availability | limitTo: 5" id="{{$index}}" ng-class="{'last': $last}">
        <td class="qty">{{available}}</td>
        <td class="item" id="{{$last}}">{{name}}</td>
    </tr>
    </tbody>
</table>

Вот как выглядит мой контроллер:

  $scope.sortType     = 'name'; // set the default sort type
$scope.sortReverse  = false;  // set the default sort order


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

Answer 1

Может быть, вы можете решить эту проблему, используя чистый код JavaScript.Посмотрите на метод sort ().Было бы что-то вроде этого:

    $scope.cars = [
      {type:"Volvo", year:2016},
      {type:"Saab", year:2001},
      {type:"BMW", year:2010}
    ];
    //sort direction
    let direction = true;
    function myFunction() {
    direction = !direction;
    if(direction)
      $scope.cars.sort((a, b) => {return a.year - b.year});
    else
      $scope.cars.sort((a, b) => {return a.year + b.year});
    }

Answer 2

Взгляните на пример в угловых документах

https://docs.angularjs.org/api/ng/filter/orderBy

Этот пример из документов - именно то, что вы ищете:

ng-repeat="friend in friends | orderBy:propertyName:reverse"

https://plnkr.co/edit/55p0yMRLnCm6twXUleHH?p=preview