时间戳

首页 > 解决方案 > 仅在 AngularJS 中使用 ng-repeat 对 100 个结果中的 10 个结果进行排序

javascript - 仅在 AngularJS 中使用 ng-repeat 对 100 个结果中的 10 个结果进行排序

问题描述

在我的应用程序中，我按字段排序creationTime 我的订单数组，它仅对订单数组长度的10 个（或所选选项）的结果产生影响。

我需要对我的所有订单项生效。

因此，当我选择选项 5时，我只会在 order-by 字段中creationTime从所有订单中看到五个订单，而不仅仅是来自这5 个订单。

ng-重复：

<select style="width: auto;  display: inline;" class="form-control col-xs-2" data-ng-model="viewby" data-ng-change="setItemsPerPage(viewby)">
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>8</option>
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
    <option>50</option>
</select>

<div class="col-md-6 col-lg-4  animation animated category" id="bpBox" data-ng-repeat="app in orders.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage )) | orderBy:'creationTime':true | filter:searchItems">

    <div class="pagination" id="pagination">
        <pagination total-items="totalItems" data-ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination>
    </div>

还有我的app.js文件：

$scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
    console.log("length of totalItems : " + $rootScope.totalItems)
};

$scope.pageChanged = function() {
    console.log('Page changed to: ' + $scope.currentPage);
    console.log("length of totalItems : " + $rootScope.totalItems)

};

$scope.setItemsPerPage = function(num) {
    $scope.itemsPerPage = num;
    $scope.currentPage = 1; //reset to first page
}

如何按字段排序creationTime所有订单数组，并在 angularjS 中的选定页数中显示选定的项目数？

标签： javascriptarraysangularjspagination

解决方案

您只是将过滤器的顺序弄错了；您在过滤整个列表之前对其进行剪裁。当| 使用符号（管道），前一个语句/操作的输出被馈送到下一个，如下所示：

limitTo : 10 | orderBy:'creationTime':true | filter:searchItems

在这种情况下，列表限制为 10 个元素，然后将这 10 个元素按创建时间排序，然后按搜索值过滤元素。

您可以使用最后的limitTo过滤器来创建页面效果。我没有测试，但下面的代码应该可以工作：

data-ng-repeat="app in orders | orderBy:'creationTime':true | filter:searchItems | limitTo : itemsPerPage : (currentPage-1)*itemsPerPage)"

limitTo 过滤器的工作方式如下。

limitTo : limit : start

推荐阅读