Question

我正在实现表视图。在表视图中我实现了无限滚动。换句话说，我有2000个对象。我一次显示25个元素。当用户滚动到底部时，它会加载更多25个元素等等。我有＆＃34; V＆＃34;或标题上的＆＃34; ^＆＃34; 按钮。单击此图像我想按降序显示最后25个元素。滚动更多时加载更多数据等等。所以我添加了过滤器在那，但它没有工作..请你告诉我我们如何实现这一点..

我会给你举例：喜欢 A, B,D,C,K,N....T,Z对象，当应用程序加载对象像这样加载时。当用户点击它时显示 Z，y，X，W，V，你... 或再次提升＆＃34; A，B，C ...... Z＆＃34;

这里是plunker

$scope.setSort = function(idx, reverse){
        $scope.sortval = 'columns['+idx+'].value';
        $scope.reverse = reverse;
    };

HTML

<div class="col col-center brd gray-20" ng-repeat="d in invoice_column_name | filter:{checked: true}">
            <sort-header label="{{d.label}}" index="{{d.index}}" sort-exp="setSort(idx, reverse)"></sort-header>

修改

Update

我将再次解释我有2000个对象..它是随机显示的。我一次只显示25个对象。当用户滚动更多数据时，它再次显示25个数据..但我想按升序排序数据首先，我需要对2000个对象进行排序，然后显示25个元素，如果用户想要加载更多，则滚动数据并加载它。在您的示例中，它仅排序前25个对象。然后加载另外25个元素然后排序5o元素..所以..所以这是不正确的解决方案 -
更新plunker

Answer 1

如果您正在处理大量数据，那么最好先加载整个集合。我有几个原因：

对每个加载操作排序结果可能会对旧浏览器造成负担，尤其是在引入更多数据时。这会降低用户界面的速度。
如果源没有按顺序提供数据，那么排序过程可能会将最后加载的项目集分散到几个＆＃34;页面上。视图之前用户正在查看的视图。然后，他们必须向后搜索结果以获取新信息。

Answer 2

尝试使用此库https://github.com/sroze/ngInfiniteScroll 首先，您需要从服务器或任何您喜欢的方式加载数据，而不是在控制器中，您必须实现一个在用户向下滚动时调用的函数。您也可以在控制器中订购数据

$filter('orderBy')(data, orderProp, desc/asc)

请参阅angularjs过滤器顺序。当用户点击字母时，您必须订购数据并搜索以该字母开头的数组中的第一个元素。您接下来要做的就是在ngInfinitScroll指令回调函数中实现它。

AngularJS：如何按照acsending / decending顺序排序

2 个答案: