AngularJS Server-Side Sorting with Paging - Dynamic Values

Question

I have server-side paging working as intended, but I need to be able to perform server-side sorts as well. My default sort is working, and I have put a function in place, but can't seem to make it dynamic so that it pulls the selected option value and only runs the REST call for the page it is on. I have hard coded both in my example below so it grabs the 2nd value in the array, and the 1st page.

Here is my 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>

Here is my 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; 
    });
}

Here is my service:

    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

I have server-side sorting working as follows, except for getting the current page:

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