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

Question

在我的应用中，我按字段creationTime排序我的订单数组，其效果仅对订单长度10(或所选选项)的结果产生影响数组。

我需要在我的所有订单项数组上实现此效果。

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

ng-repeat:

<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 中选定的页数中显示选定的项目数？

Answer 1

您只是将过滤器的顺序弄错了；您在过滤之前剪切了整个列表。当 |使用符号(管道)，前一个语句/操作的输出将被输入到下一个语句/操作中，如下所示:

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