Javascript 重新填充ng repeat表，但保持其原样排序

我用

ng repeat

从Web服务中填充了一个表。用户可以按所有列对表进行排序，并且每隔x秒应用程序会对Web服务进行另一次轮询以获取新数据

这是我思考此应用程序如何工作的过程：

1st http.get [
    get data
    sort data  by time
]

interval [
    get new data
    only if the data has changes [
        display toast [
            if toast is clicked [
                take user to top of page
                sort the new data by time like 1st call ever
            ] else [
                do nothing
                keep same sorting order
                dont even refresh the data
            ]
        ]
    ]
]

目前我想我已经很接近了，但是当收到新的数据时，有些事情正在发生。它以从webservice获得的相同顺序显示它，即使我调用了我的函数排序方法。当我点击烤面包时，同样的事情也会发生。它应该清除数据更新的次数（幕后），并按时间顺序显示新数据。我目前有这个我正在工作。但这里是整个

$interval

区域：

$interval(function() {
      $http.get('https://api.myjson.com/bins/4djr5').success(function(data) {

        if (angular.equals(data, $scope.tempdata)) { //this is going to be !angular.equals() but it is this for testing purposes
          console.log("here...");

          $scope.recentalerts = data; //recent alerts = the new data (that has new info in it)
          $scope.count++;
          toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-top-full-width",
            "preventDuplicates": true,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "2000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
          };

          toastr.options.onclick = function() {

            $(function() {
              $('body').scrollTop(0);
            });
            $scope.order('-time');
            $scope.count = 0;
          };

          toastr["success"]("Click here to return to the top to view. +" + $scope.count, "New Alerts"); //display the toast

          $scope.tempdata = $scope.recentalerts; //the new data is now also the temp data to compare the next round to the new data

        } //end if

      });
}, 4000);

---

很抱歉，所有的评论，我只是想保持我的想法，这是困惑我。如果需要的话，我想详细说明一下，但我希望这能帮助您理解我要完成的任务。

您可以通过在范围变量上保存所选排序，然后在ng上使用它来完成此任务。重复：

$scope.savedOrder = 'name';

$scope.order = function(predicate) {
  $scope.savedOrder = predicate;
  $scope.reverse = !$scope.reverse;
  $scope.recentalerts = orderBy($scope.recentalerts, predicate, $scope.reverse);
};

<tr data-ng-repeat="alert in recentalerts | orderBy:savedOrder:reverse">
          <td>{{alert.name}}</td>
          <td>{{alert.time}}</td>
          <td>{{alert.ip}}</td>
          <td>{{alert.column}}</td>
          <td>{{alert.type}}</td>
        </tr>

$scope.savedOrder='name'；
$scope.order=函数（谓词）{
$scope.savedOrder=谓词；
$scope.reverse=！$scope.reverse；
$scope.recentalerts=orderBy（$scope.recentalerts，谓词，$scope.reverse）；
};
{{alert.name}
{{alert.time}
{{alert.ip}
{{alert.column}
{{alert.type}

编辑：

以下是您的建议变更的建议：

---

哦，这是一个很好的解决方案。但有一个问题：当你点击烤面包时，为什么会延迟这么长时间？我认为这里有一个问题，

orderBy:savedOrder

与toast的

onclick

竞争。在我设置的烤面包片的

onclick

顺序（'-time'）中，您建议它遵循保存的顺序。这是一个问题，还是有办法加快速度？看起来不应该那么慢。看起来是因为这一切都发生在间隔时间内。如果在onclick的末尾正确地调用$scope.$apply（），则延迟将消失。看看这个修改过的plunkr：哦，好吧，这会解决滞后问题的，谢谢。很抱歉再次出错，但是你知道为什么现在的排序不起作用吗？正在尝试调试。似乎

$scope.apply（）

会干扰一些操作。因此，对于要通过双向绑定更新的DOM，angularjs在作用域上使用监视来检测作用域变量中的更改。这些监视通过摘要循环触发，而摘要循环又从调用$apply（）开始。每当您在angularjs上下文之外（例如在setTimeout内）执行某些操作时，都需要手动调用$apply（）。现在，您使用的是$interval（），它在函数调用结束时为您调用$apply（），但是，由于您对模型的更新发生在$http success上，这是异步的，它发生在调用$apply（）之后。因此，您是说在单击toast之后，通过单击列进行排序停止工作？