javascript - AngularJS 分页 - 获取当前页面并传递给 Controller

Question

我正在实现服务器端排序和分页，我需要传递用户所在的当前页面，以便如果他们排序并且位于与第一页不同的页面上(例如按“最少投票”排序在第 5 页上，在第 5 页上未显示第 1 页的已排序结果，但显示了应在第 5 页上的已排序结果)。基本上，我需要就地排序但不知道如何获取当前页面。

服务器端分页工作正常，我相信我在这里遗漏了一些简单的东西。

HTML(请注意我正在使用这个自定义指令:https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination)

<tr dir-paginate="article in articles | itemsPerPage:articlesPerPage" total-items="totalArticles" current-page="currentPage">

<td>
    <div class="col-md-1 voting well">
        <div class="votingButton" ng-click="upVote(articlevote);">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </div>
        <div class="badge badge-inverse">
            <div>{{article.articlevotes}}</div>
        </div>
        <div class="votingButton" ng-click="downVote(articlevote);">
            <i class="glyphicon glyphicon-chevron-down"></i>
        </div>
    </div>
</td>
<td>{{article.articletitle}}</td>
<td>{{article.articlecategoryid}}</td>
<td><a ng-href="#article/{{article.id}}/{{article.articlelink}}">{{article.articletitle}}</a></td>
</tr>
                </table>
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>

Controller

$scope.articles = [];
$scope.totalArticles = 0;
$scope.articlesPerPage = 10; // this should match however many results your API puts on one page
$scope.currentPage = 1;


   // sort options
$scope.sortoptions = [
{
    label: 'Most Votes',
    value: 'articlevotes desc',
},
{
    label: 'Least Votes',
    value: 'articlevotes asc',
}
];

var sortBy = $scope.sortoptions[0].value;
var currPage = $scope.currentPage; // Get current page
console.log(currPage);

// Initial page load
getResultsPage(1, sortBy);

$scope.update = function (articleSortOrder) {
    // get value of sort and log it
    console.log(articleSortOrder.value); 
    sortBy = articleSortOrder.value;

    // log current page and pass as parameter
    console.log(currPage);
    getResultsPage(currPage, sortBy); // need to make dynamic so it gets current page
}

$scope.pageChanged = function (newPage) {
    getResultsPage(newPage, sortBy);
};

function getResultsPage(pageNumber, sortorder) {

    // currently skipping by page number * articles per page
    pfcArticles.query({ $skip: (pageNumber - 1) * $scope.articlesPerPage, $top: $scope.articlesPerPage, $orderby: sortorder, $inlinecount: 'allpages' }, function (data) {
        $scope.articles = data.results;
        $scope.totalArticles = data.count; // Can change to hard number to reduce total items instead of LimitTo
    });
}

Answer 1

问题是你正在分配:

var currPage = $scope.currentPage;

因此 currPage 设置为 1，因为您的 Controller 已实例化，并且永远不会更改。因此，当您稍后在 Controller 中引用 currPage 时，它仍然是 1。

您应该改为直接引用 $scope.currentPage 值，该值将由分页指令更新。

所以尝试将“更新”方法更改为:

$scope.update = function (articleSortOrder) {
    sortBy = articleSortOrder.value;
    getResultsPage($scope.currentPage, sortBy);
} 

这应该将正确的当前页面值传递给您的服务。