AngularJS通过theader对多个表进行排序

我的第一个AngularJS项目有点小问题。总之，我有一个JSON，我使用服务来创建表来加载它

此JSON如下所示：

[ { id:5， 年份：2018年， 数据：[{id:1，姓名：“John Doe”，年龄：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>

它实际上是有效的，但问题是我希望每个表彼此独立。目前，如果我对第一个生成的表中的“name”列进行排序，它也会对其他表中的“name”进行排序

是否有方法将排序应用于单击位置的表？我想添加一个参数，它将是表的id或类似的东西。我现在还没试过，但这是个好主意还是有合适的方法

---

提前感谢您，

您希望每个表都有一个排序变量，但您正在共享每个表都要查找的全局变量。有几种解决方案。我想到的一个方法是有一个排序列列表，并将其用于每个表：

$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]">

---

根据代码，表可能共享一个作用域，包括sortColumn属性。如果是这种情况，在一个表中更改它将对所有表进行排序。您可以通过使每个表成为具有独立作用域的指令或组件来缓解这一问题

也就是说，你可以有

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

然后，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>

身份证件
名称
年龄
....
...
....

每个表是单独的组件/指令还是偶然共享一个作用域？所有表都在同一个控制器中。它们共享相同的父作用域。但是您的scope.sortcolumn也共享，不是吗？这可以解释你描述的行为。谢谢你的回答，它工作得很好，但是如果我想有一个默认排序，让我们通过列“名称”（asc）来进行排序。初始化它的最佳方法是什么？用n个条目预先填充数组？您可以填充该数组，也可以在初始化元素数据时填充该数组。我会做后者。

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

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'
  };
});

<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>