AngularJS Сортировка нескольких таблиц через theader

Question

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

Этот JSON выглядит так:

[ { id: 5, год: 2018, данные: [{id: 1, имя: "Джон Доу", возраст: 28}, ...] }, ... ]

Для каждого элемента в моем JSON я создаю таблицу и заполняю каждую таблицу каждым подэлементом (данными). Затем я внедрил систему сортировки для моего стола. Когда я нажимаю на одну из них, она сортирует данные.

Вот пример моего HTML-кода:

<table ng-repeat="elem in json">
<thead>
<tr>
<th ng-click="sortData('id')">ID <i ng-class="getSortClass('id')"></i></th>
<th ng-click="sortData('name')">Name <i ng-class="getSortClass('name')"></i></th>
<th ng-click="sortData('age')">Age <i ng-class="getSortClass('age')"></i></th>
<th>....</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in elem.data | orderBy:sortColumn:reverseSort">
<td>...</td>
....
</tr>
</tbody>
</table>

Вот пример моего кода JS:

$scope.sortColumn = "name";
$scope.reverseSort = false;

$scope.sortData = function (column) {
    $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
    $scope.sortColumn = column;
}

$scope.getSortClass = function (column) {

if ($scope.sortColumn == column) {
    return $scope.reverseSort
      ? 'fa fa-chevron-down'
      : 'fa fa-chevron-up';
}

return '';
}

Это на самом деле работает, но дело в том, что я хочу, чтобы каждая таблица была независимой друг от друга. В настоящее время, если я сортирую, например, столбец «name» в первой сгенерированной таблице, он также сортирует другие таблицы «name».

Есть ли способ применить сортировку к таблице, из которой был сделан клик? Я думал добавить параметр, который будет идентификатором таблицы или что-то в этом роде. Я не пробовал это сейчас, но это хорошая идея или есть правильный способ сделать это?

Заранее благодарю,

Answer 1

Исходя из кода, похоже, что таблицы могут совместно использовать одну область видимости, включая свойство sortColumn. Если это так, изменение его в одной таблице приведет к сортировке всех таблиц. Вы можете уменьшить это, сделав каждую таблицу директивой или компонентом с изолированной областью действия.

т.е. Вы могли бы иметь что-то вроде

<my-custom-table elem="elem" ng-repeat="elem in json">
</my-custom-table>

И тогда вы бы определили my-custom как директиву с изолированной областью действия, например:

angular.module('yourApp').directive('myCustomTable', function () {
  return {
     scope: {
         elem: '='
     },
     link: function(scope){
         scope.getSortClass=function(){…}
         scope.sortData=function(){…}
     },
     templateUrl: 'path_to_my_custom_table.html'
  };
});

И тогда шаблон my_custom_table.html будет просто

<table>
   <thead>
     <tr>
     <th ng-click="sortData('id')">ID <i ng-class="getSortClass('id')"></i></th>
     <th ng-click="sortData('name')">Name <i ng-     class="getSortClass('name')"></i></th>
     <th ng-click="sortData('age')">Age <i ng- class="getSortClass('age')"></i></th>
     <th>....</th>
   </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in elem.data | orderBy:sortColumn:reverseSort">
     <td>...</td>
     ....
    </tr>
  </tbody>
</table>

Answer 2

Вам нужна переменная сортировки для каждой из ваших таблиц, но вы используете глобальную переменную, которую ищет каждая таблица. Есть несколько решений. Мне приходит в голову список столбцов сортировки и использующий его для каждой таблицы:

$scope.sortColumn = [];
$scope.reverseSort = [];

$scope.sortData = function (id, column) {
    $scope.reverseSort[id] = ($scope.sortColumn[id] == column) ? !$scope.reverseSort[id] : false;
    $scope.sortColumn[id] = column;
}

и измените ng-repeat соответственно:

<tr ng-repeat="row in elem.data | orderBy:sortColumn[id]:reverseSort[id]">

и таким же образом ваш $scope.getSortClass метод.

также ваш ng-click становится таким:

<th ng-click="sortData(elem.id, 'id')">