Question

我有一个表格，我正在使用ng-repeat来填充来自网络服务的数据。用户可以按所有列对表进行排序，并且应用程序每隔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
            ]
        ]
    ]
]

目前我非常接近我认为，但收到新数据时会发生一些事情。即使我调用功能排序方法，它也会以与从Web服务获得的顺序显示它。当我点击吐司时也会发生同样的事情。它应该清除数据更新的次数（在幕后）并按时间顺序显示新数据。我目前正在研究这个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

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

1 个答案: