javascript - 如何重构这个要排序的对象表？

Question

以下是当前编写内容的基础知识:

$scope.data = {};
var data = $http.get(array of objects from server);
for (var i = 0; i<data.length; i++) {
  $scope.data[data[i]._id] = data[i];
}

然后我正在构建一个数据表，如下所示:

<table>
    <tr>
        <th>Time</th>
        <th>Activity</th>
        <th>Location</th>
        <th>Customer</th>
        <th>Completed</th>
    </tr>
    <tr ng-repeat="item in data">
        <td>{{ data.timestamp }}</td>
        <td>{{ data.activity }}</td>
        <td>{{ data.location }}</td>
        <td>{{ data.customer }}</td>
        <td><button ng-click="completeAction(data._id)">Complete</button></td>
    </tr>
</table>

然后在completeAction中它会向服务器发布id已完成的信息，当它从发布中返回200状态时，它会执行以下操作:

delete $scope.data[id];

这一切都很好，但我希望能够以特定的方式对表中的数据进行排序；首先按事件，然后按时间。我从 https://github.com/Teun/thenBy.js 找到了一个代码片段这让我可以很好地对来自服务器的数据数组进行排序，但显然这不适用于 $scope.data，因为它是一个对象而不是数组。

所以我尝试将 $scope.data 转换为数组并执行如下操作:

$scope.data = [];
var data = $http.get(array of objects from server);
var s = firstBy("activity")
        .thenBy("time");
data.sort(s);
for (var i = 0; i<data.length; i++) {
  var found = false;
  for (var j = 0; j<$scope.data.length; j++) {
    if ($scope.data[j]._id == data[i]._id)
      found = true;
  }
  if (!found) 
    $scope.data.push(data[i]);
}

这也有效。我的 table 现在按照我想要的方式排序。那么问题就变成了当我按下按钮时我不知道如何从 $scope 中删除东西。由于之前我只能访问该对象并通过 id 删除它，所以我不确定现在最好的方法。另外，我觉得一定会有更好的方法来完成我迄今为止所做的所有事情。我只是不太懂 JavaScript 开发人员:P

希望我能很好地解释我的意思。如果没有，请告诉我，我可以尝试更具体。感谢您的帮助!

编辑以回答问题:

function completeAction(id) {
  $http.post(post to server with item id saying that it has been completed)
       .then(function(response) {
          if (response.status == 200) {
             delete $scope.data[id];
          }
       })
}

Answer 1

您可以使用 Angular orderBy 过滤器进行相同的排序过滤，您可以将您想要的 string 或 string 数组传递给该过滤器对集合进行排序。还可以在过滤后使用 as FilteredData ，其中 filterData 将拥有所有已排序的对象集合。您可以通过执行 $scope.filteredData 访问 Controller 内部。

<tr ng-repeat="item in data | orderBy: ['activity', 'time'] as filteredData">

Be aware that, on larger collection using view level filter can affect performance. I'd say that try to use it inside controller it collection is larger like $filter('orderBy')($scope.data,
['activity', 'time'])

<小时/>

更新

保持数据更新总是更好。我想说，您应该在完成操作后立即进行另一个 ajax 调用，而不是在客户端处理集合状态，以便保持应用程序的数据一致性。