我如何從我的角度應用程序，使用WordPress的REST api

Question

拉更多WordPress的帖子我想建立一個WordPress的帖子頁面，最初顯示4，然後懶加載這些onclick的「加載更多」按鈕。此列表將通過角度過濾。

我使用的WordPress JSON REST API插件，和我的角度應用目前：

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

完成 - 從一個朋友的幫助下，該解決方案很好地工作：

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

Answer 2

基本上你需要使用它已經在wordpress API.

你需要增加每個AJAX調用您的posts_per_page實現分頁。

控制器

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