我有一个表格,我正在使用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);
对于所有的评论感到抱歉,我只是想保持我的想法,这让我感到困惑。如果需要,我想详细说明,但我希望这能帮助你理解我想要实现的目标。
答案 0 :(得分: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>
修改强>
以下是您提出修改的傻瓜: