using angularjs and json wordpress api can’t access currentPage value in app.factory $resource

2 comments

1. It will be easier when you load all of your posts and stores them into an $scope variable. And on this variable you can apply an filter. In AngularJS it is possible to create your custom filters.

   Lets have a look in module documentation filter.

   Example

   angular.module('App.filters', []).filter('postFilter', [function () {
       return function (posts, startPost, endPost) {
           if (!angular.isUndefined(posts) && !angular.isUndefined(startPost) && !angular.isUndefined(endPost)) {
               var tempPosts = [];
   
               for(var i=startPost;i<endPost;i++){
                   tempPosts.push(posts[i]);
               }
   
               return tempPosts;
           } else {
               return posts;
           }
       };
   }]);
   

   Normally it should be possible to control the number of given posts via REST-interface.

   UPDATE

   Okay I believe now what you want. You can add your own resource actions. Something like this:

   app.factory('applicazioneFactory', ['$resource', function ($resource) {
       var url = '/wp-json/:action/';
       return $resource(url, {}, {
           getNextPosts: { params: {action: 'posts'}, method: 'GET', isArray: true },
       });
   }]);
   

   You can call this method like this:

   applicazioneFactory.getNextPosts({'count': 5, 'page': 1, 'post_type': 'Category1'})
   applicazioneFactory.getNextPosts({'count': 5, 'page': 1, 'post_type': 'Category2'})
   applicazioneFactory.getNextPosts({'count': 5, 'page': 1, 'post_type': 'Category3'})
   

   HTTP-Requests:

   http://<yourhost>/wp-json/posts/?count=5&page=1&post_type=Category1
http://<yourhost>/wp-json/posts/?count=5&page=1&post_type=Category2
http://<yourhost>/wp-json/posts/?count=5&page=1&post_type=Category3

   More information you will find in the documentation: ngResource

   UPDATE 2

   You don’t need an variable inside your factory and it is no problem to use bootstrap pagination. Please show below I have an function pageChange() inside from your controllers $scope.

   var app = angular.module('applicazioneIndex', ['ui.bootstrap','ngSanitize','ngResource']);
   
   app.controller('ApplicazioneController', function ($scope, applicazioneFactory) {
   
       $scope.itemsPerPage = 3;
       $scope.currentPage = 1;
       $scope.totalItems = 0;
   
       $scope.pageChange = function(){
         applicazioneFactory.query({'count': $scope.itemsPerPage, 'page': $scope.currentPage}).$promise.then(function(data, status, headers, config){
         $scope.totalItems = headers["X-WP-Total"];
         $scope.filteredArticoli = data;
         });
       }
       // Init on page load
       $scope.pageChange();
   });
   
   
   app.factory('applicazioneFactory',  function ($resource) {
     return $resource('/wp-json/posts');
   });
   

   HTML-Snippet

   <div class="row">
       <div class="container">  
           <div ng-controller="ApplicazioneController">
               <input type="text" ng-model="searchFilter" class="form-control">
                   <table class="table table-hover">
                       <thead>
                           <th>{{currentPage}} di {{totalItems}} {{watchPage}}</th>
                           <th>post_content</th>
                       </thead>
                       <tbody>
                           <tr ng-repeat="post in filteredArticoli | filter:searchFilter">
                               <td>{{post.title}}</td>
                               <td><a ng-href="{{post.featured_image.source}}"><img ng-src="{{post.featured_image.attachment_meta.sizes.thumbnail.url}}"></a></td>
                               <td ng-bind-html="post.excerpt"></td>
   
                           </tr>
                       </tbody>
                   </table>
           </div>
       </div>
   </div>
   
   <pagination boundary-links="true" max-size="5" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChange()"></pagination>
   

   Everytime you click on pagination the function pageChange() will be called and send the following HTTP-Requests:

   http://<yourhost>/wp-json/posts/?page=1

   Hope this will help you

   Log in to Reply

2. Thanks to this article:
   How to load json into my angular.js ng-model?

   I’ve found the solutions: Delete the useless app.factory, load all data in controller and rotate the JSON using currentPage change from bootstrap pagination.

   This is the working script.js code:

   var req = new XMLHttpRequest();
   var URL = "/wp-json/posts";
   req.open('GET', URL, false);
   req.send(null);
   var maxpagine = req.getResponseHeader("X-WP-TotalPages");
   var totarticoli = req.getResponseHeader("X-WP-Total");
   var currentPage = '';
   var newPage = '';
   
   
   var app = angular.module('applicazioneIndex', ['ui.bootstrap','ngSanitize','ngResource']);
   
   
   app.controller('ApplicazioneController', function($scope, $http) {
       $scope.itemsPerPage = 5;
       $scope.currentPage = 1;
       $scope.totalItems = totarticoli;
   
   $scope.$watch('currentPage', function(newPage){
       $scope.watchPage = newPage;
   
   
     $http.get('/wp-json/posts?page=' + newPage)
          .then(function(res){
             $scope.filteredArticoli = res.data; 
   $scope.$watch('currentPage + itemsPerPage', function() {
   
           var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
           end = begin + $scope.itemsPerPage;
       $scope.filteredArticoli = $scope.articoli.slice(begin, end);
   
         });
   
       });
   
     });  
   
   });
   

   Many thanks to Sven Schürmann that helped me in looking for different directions.

   Log in to Reply