时间戳

首页 > 解决方案 > Angularjs：如何在所有分页页面中保留 $index，因为它们在数据列表中

javascript - Angularjs：如何在所有分页页面中保留 $index，因为它们在数据列表中

问题描述

如何在分页后保留$index数字，因为它们在我的列表数据中。

假设data.length是50，它们从索引 0开始，第一页包含10 个项目，并以索引 9结束，第二页中的下一个项目应从索引 10开始，依此类推。

<script type="text/ng-template" id="custom-pagination">
    <li ng-class="{disabled: noPrevious()||ngDisabled, previous: align}" 
        class="disabled previous">
        <a class="btn btn-secondary btn-md mr-2 text-white"
           ng-click="selectPage(page - 1, $event)">
           <i class="fa fa-angle-left pagination-left"></i>
        </a>
    </li>
    <li ng-class="{disabled: noNext()||ngDisabled, next: align}" class="disabled next">
        <a class="btn btn-primary btn-md btn-md text-white"
           ng-click="selectPage(page + 1, $event)">
          <i class="fa fa-angle-right pagination-right"></i>
        </a>
    </li>
</script>
<ul class="unstyled inbox-pagination">
    <li>
        <span>
            <%currentPage%>-
            <% numPages %> из
            <%data.length%>
        </span>
    </li>
    <pagination class="np-btn pagination-sm float-right pagination"
                uib-pager boundary-links="true" total-items="data.length"
                ng-model="currentPage" items-per-page="pageSize"
                template-url='custom-pagination'>
    </pagination>
</ul>

<tr ng-repeat="(key, item) in data | startFrom: (currentPage - 1) * pageSize | limitTo: pageSize" class="cp"
    ng-right-click="ShowContextMenu(key,item.unique_order_id)"
    context="context_menu">
</tr>

app.controller(
    'user.controller', 
    ['$scope', '$filter', '$timeout', '$compile', 'csrfToken', 'sendRequest', 'toastr',  
    function($scope, $filter, $timeout, $compile, csrfToken, sendRequest, toastr){

    $scope.pageSize = 1
    $scope.currentPage = 1

    // ......

}]).filter('startFrom', function() {
    return function(data, start) {
    // Some code goes right here ...
        return data.slice(start)
    }
});

标签： javascriptangularjs

解决方案

我找到了一个解决方案，而不是直接从key或$index获取项目，我可以通过检查项目本身确切存在的索引来获取任何项目的索引。

HTML

ng-click="unique_order_directive(item.unique_order_id)"

JS

$scope.unique_order_directive = function (uid) {
    var item_index = $scope.data.findIndex( item => item.unique_order_id === uid )
    $scope.showOrder = !$scope.showOrder
    $scope.current_order_index = item_index
}

推荐阅读