Javascript 如何使用WordPressRESTAPI从angular应用程序中获取更多WordPress帖子

我正在尝试构建一个WordPress帖子页面，最初显示4条，然后点击“加载更多”按钮惰性加载这些帖子。此列表可通过角度过滤器过滤

我正在使用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);
    }



}]);

我只是有点不知道如何在每次点击LoadMore按钮时获得接下来的4篇文章。我已经设置了一个loadmore函数，单击按钮即可调用该函数：

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

加载更多文章

---

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

基本上您需要使用已在中实现的分页功能

您需要在每次ajax调用中增加每页的帖子数量

控制器

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

---

基本上，您需要使用已经在中实现的分页

您需要在每次ajax调用中增加每页的帖子数量

控制器

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

---

完成-在朋友的帮助下，此解决方案运行良好：

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

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

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

}]);

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

    $scope.init = function() {
        $http({ // Load posts from the WordPress API
            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) {});
    };
    var page = 2;
    $scope.getData = function() {
        $http({ // Load posts from the WordPress API
            method: 'GET',
            url: $scope.api,
            params: {
                'filter[posts_per_page]': 4,
                'page': page
            },
        }).
        success(function(data, status, headers, config) {
            $scope.posts = $scope.posts.concat(data);
            page++;
        }).
        error(function(data, status, headers, config) {});
    };

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

---

完成-在朋友的帮助下，此解决方案运行良好：

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

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

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

}]);

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

    $scope.init = function() {
        $http({ // Load posts from the WordPress API
            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) {});
    };
    var page = 2;
    $scope.getData = function() {
        $http({ // Load posts from the WordPress API
            method: 'GET',
            url: $scope.api,
            params: {
                'filter[posts_per_page]': 4,
                'page': page
            },
        }).
        success(function(data, status, headers, config) {
            $scope.posts = $scope.posts.concat(data);
            page++;
        }).
        error(function(data, status, headers, config) {});
    };

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

---

---

请看一下

ng infinite scroll

，它将延迟加载其他记录。谢谢链接，但不是真的，需要单击。您需要首先实现服务器端分页，然后通过URLOk将

pageNumber

和

query

作为查询参数从客户端传递到URLOk，谢谢，然而，我不知道如何实现服务器端分页等。抱歉，我对angular和其他的废话还很陌生。如果你能提供更多的信息，我会非常感激。服务器端分页是正常的过程，当我们有大量数据并希望部分显示数据时，请进入图片。你能告诉我你现在使用的是哪种技术吗？你能看看

ng infinite scroll

，它将延迟加载其他记录感谢链接，但不是真的，需要单击。您需要首先实现服务器端分页，然后通过URLOk将

pageNumber

和

query

作为查询参数从客户端传递到URLOk，对此表示感谢，但是我不知道如何实现服务器端分页等。抱歉，我对angular和其他的错误很陌生。如果你能提供更多的信息，我会非常感激。服务器端分页是正常的过程，当我们有大量的数据并希望显示部分数据时，请进入图片。你能告诉我你现在使用的是哪种技术吗？嗨。。。这会为我生成一个错误，未定义计数。另外，如果我让它工作，我会向loadmore（）函数添加什么来增加计数并附加额外的帖子？@zeKoko，如果你看我的评论..你需要声明

var count=1

在你的

$http

函数之外，它会处理这个问题..谢谢！好的，我已经添加了这个，但是我仍然不明白如何在点击load more按钮时将额外的帖子添加到页面中。谢谢，我已经更新了，但是我仍然没有在点击loadmore按钮时获得额外的帖子。我有点不清楚posts_per_page var是在哪里声明的，以及它到底在哪里更新的。不，它对我仍然不起作用，我已经更新了代码，但我不确定我需要在load more函数中添加什么才能让接下来的4篇文章显示出来。（感谢您在这方面的持续帮助）嗨。。。这会为我生成一个错误，未定义计数。另外，如果我让它工作，我会向loadmore（）函数添加什么来增加计数并附加额外的帖子？@zeKoko，如果你看我的评论..你需要声明

var count=1

在你的

$http

函数之外，它会处理这个问题..谢谢！好的，我已经添加了这个，但是我仍然不明白如何在点击load more按钮时将额外的帖子添加到页面中。谢谢，我已经更新了，但是我仍然没有在点击loadmore按钮时获得额外的帖子。我有点不清楚posts_per_page var是在哪里声明的，以及它到底在哪里更新的。不，它对我仍然不起作用，我已经更新了代码，但我不确定我需要在load more函数中添加什么才能让接下来的4篇文章显示出来。（感谢您在这方面的持续帮助）