javascript - 如何使用 WordPress REST api 从我的 Angular 应用程序中提取更多 WordPress 帖子

Question

我正在尝试构建一个 WordPress 帖子页面，最初显示 4 个帖子，然后在单击“加载更多”按钮时延迟加载这些帖子。该列表将可以通过 Angular 进行过滤。

我正在使用 WordPress 的 json Rest api 插件，我的 Angular 应用程序当前是:

var myapp = angular.module( 'myapp', [] );

// Set the configuration
myapp.run( ['$rootScope', function($rootScope) {

    // Variables defined by wp_localize_script
    $rootScope.api = aeJS.api;

}]);

// Add a controller
myapp.controller( 'mycontroller', ['$scope', '$http', function( $scope, $http ) {

    // Load posts from the WordPress API
    $http({
        method: 'GET',
        url: $scope.api,
        params: {
            'filter[posts_per_page]' : 4
        },
    }).
    success( function( data, status, headers, config ) {
        $scope.posts = data;
    }).
    error(function(data, status, headers, config) {});

    $scope.loadmore = function(){
        $scope.posts = $scope.posts.concat(data);
    }



}]);

我只是有点不知道如何在每次单击“加载更多”按钮时获取接下来的 4 个帖子。我设置了一个 loadmore 函数，单击按钮即可调用该函数:

<button ng-click="loadmore()">Load more articles</button>

如有任何建议，我们将不胜感激，谢谢。

Answer 1

基本上你需要使用wordpress API.中已经实现的分页。

您需要在每次 ajax 调用时增加 posts_per_page。

Controller

myapp.controller('mycontroller', ['$scope', '$http', function($scope, $http) {
    var count = 0;
     $scope.posts = []; //setted as blank
    $scope.getData = function() {
        // Load posts from the WordPress API
        $http({
            method: 'GET',
            url: $scope.api,
            params: {
                'filter[posts_per_page]': 4,
                'filter[page]': ++count
            },
        }).
        success(function(data, status, headers, config) {
            $scope.posts = $scope.posts.concat(data);
        }).
        error(function(data, status, headers, config) {});
    };

    $scope.loadmore = function() {
        $scope.getData();
    };
}]);