Javascript 使用AngularJS和Azure移动Web服务以及ng资源进行分页

我使用以下自定义指令进行分页，它非常有效：

但现在我有50多个项目，并希望使用服务器端分页。我的后端是Azure Mobile Web Services，但我一直在尝试获取正确的REST调用，以及如何在Angular中使用它，以便使用我的自定义指令进行分页

我试图通过我的服务利用这一点，如下所示：

// All Articles
pfcServices.factory('pfcArticles', ['$resource', function ($resource) {
return $resource('https://myrestcall.net/tables/articles/:articleID?$top=100&$inlinecount=allpages', { articleID: '@id' },
{
    'query': { method: "GET", isArray: false },
    'update': { method: 'PATCH' }
}
);
}]);

我的控制器是（请注意，我删除了投票功能以保持本文的简洁）：

我的html如下所示（请注意，我在本文中删除了控制器的投票功能，以使其更简洁）：

分页的正确RESTURL格式是什么，我如何在Angular应用程序中使用它？我相信我可以使用$top、$skip和$inlinecount，但我不确定如何按照自定义指令将其转换为“页面”。这就是导致解析错误的原因吗

前。

---

？$top=100&$skip=50&$inlinecount=allpages

这是通过Michael Bromley的帮助解决的，如此处所述：

在添加更多记录时，似乎每页最多50条，但现在如何将其编码为正确的页面？似乎是文章过滤器上的语法错误：dir paginate=“article in articles | itemsPerPage:10 total items=”totalusers“这正是它的一部分。在我发布的答案中也做了一些调整。

 // Articles for Home Paging Test
pfcControllers.controller('pfcHomeArticlesCtrlTest', ['$scope', 'auth', 'pfcArticles', function ($scope, auth, pfcArticles) {

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

$scope.pagination = {
    current: 1
};

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

function getResultsPage(pageNumber) {
    // Using inlinecount creates two objects of "results" and "count"
   pfcArticles.query(function(data) {
       $scope.articles = data.results;
       $scope.totalArticles = data.count;
    });
}    
}]);

    <div ng-controller="pfcHomeArticlesCtrlTest">
        <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:10 total-items=" totalusers">

                <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>
    </div>

.controller('UsersController', function($scope, $http) {
$scope.users = [];
$scope.totalUsers = 0;
$scope.usersPerPage = 25; // this should match however many results your API puts on one page
getResultsPage(1);

$scope.pagination = {
current: 1
};

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

function getResultsPage(pageNumber) {
// this is just an example, in reality this stuff should be in a service
$http.get('path/to/api/users?page=' + pageNumber)
    .then(function(result) {
        $scope.users = result.data.Items;
        $scope.totalUsers = result.data.Count
    });
}
})