javascript - 重新填充 ng-repeat 表，但保持原样排序

Question

我有一个表格，我正在使用 ng-repeat 填充来自网络服务的数据。用户可以按所有列对表格进行排序，应用程序每隔 x 秒对网络服务进行一次轮询以获取新数据。

这是我对这个应用程序如何工作的思考过程:

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

目前我非常接近我认为，但是当接收到新数据时有些事情正在发生。它按照从网络服务获取的相同顺序显示它，即使我调用了我的功能排序方法。当我点击 toast 时也会发生同样的事情。它应该清除数据更新的次数(在幕后)并按时间顺序显示新数据。我现在有这个 plunker我正在努力。但这里是整个 $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);

对于所有评论，我深表歉意，我只是想保持思路清晰，这让我感到困惑。如果需要，我想详细说明，但我希望这能帮助您理解我正在努力完成的任务。

Answer 1

您可以通过将选定的排序保存在范围变量上然后在您的 ng-repeat 上使用它来实现:

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

编辑:

这是您提出的更改建议:

http://plnkr.co/edit/0qZLPBHhlgGZuS3Nm6Vi?p=preview