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>

控制器

$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，然后永远不会被更改。因此，当您稍后在控制器中引用currPage时，它仍为1。

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

因此，请尝试更改＆＃34;更新＆＃34;方法：

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

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

AngularJS分页 - 获取当前页面并传递给控制器

1 个答案: