javascript - AngularJS 服务器端分页排序 - 动态值

Question

我的服务器端分页按预期工作，但我也需要能够执行服务器端排序。我的默认排序正在工作，并且我已经放置了一个函数，但似乎无法使其动态化，以便它提取选定的选项值并且仅对其所在页面运行 REST 调用。我在下面的示例中对这两个值进行了硬编码，因此它获取数组中的第二个值和第一页。

这是我的 HTML:

 <select data-ng-model="articleSortOrder" data-ng-options="opt as opt.label for opt in sortoptions" ng-change="update()"></select>

            <table class="table table-striped">
                <tr>
                    <th>Votes</th>
                    <th>Title</th>
                    <th>Category ID</th>
                    <th>Link</th>
                </tr>

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

                    <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 :

pfcControllers.controller('pfcHomeArticlesCtrl', ['$scope', 'auth', 'pfcArticles', 'pfcArticle', 'pfcArticleVotes', function ($scope, auth, pfcArticles, pfcArticle, pfcArticleVotes) {

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

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

$scope.articleSortOrder = $scope.sortoptions[0];

getResultsPage(1);

$scope.update = function () {
    $scope.articleSortOrder = $scope.sortoptions[1]; // need to make dynamic
    getResultsPage(1); // need to make dynamic so it gets current page
}

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

function getResultsPage(pageNumber) {

    // currently skipping by page number * articles per page
    pfcArticles.query({ $skip: (pageNumber - 1) * $scope.articlesPerPage, $top: $scope.articlesPerPage, $orderby: $scope.articleSortOrder.value, $inlinecount: 'allpages' }, function (data) {
        $scope.articles = data.results;
        $scope.totalArticles = data.count; 
    });
}

这是我的服务:

    pfcServices.factory('pfcArticles', ['$resource', function ($resource) {
    return $resource('https://myrestcall.net/tables/articles/:articleID', { articleID: '@id' },
    {
        'query': { method: "GET", isArray: false },
        'update': { method: 'PATCH' }
    }
    );
}]);

Answer 1

我的服务器端排序工作如下，除了获取当前页面:

HTML:

<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


   // 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
    });
}