Search code examples
angularjsangular-ui-bootstraprestangular

Restangular and UI-Bootstrap first page appears blank


I am currently getting to grips with Restangular and seem to be making some headway. I have opted to use the UI-Bootstrap for the ease of use, as I am use to working with bootstrap before.

My current issue is that I have pagination working for my controller, however the results do not appear when you first visit the page. If I visit the second page and then go back to the first page the results are there as expected. If I then choose to reload the page in anyway the results on the first page do not appear.

My code is as follows:

app.controller('BillsListCtrl', function ($scope, BillRepository) {
  $scope.filteredBills = [],
  $scope.currentPage = 1,
  $scope.itemsPerPage = 10;

  $scope.bills = BillRepository.getList();

  $scope.$watch('currentPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
      end = begin + $scope.itemsPerPage;

    $scope.filteredBills = $scope.bills.slice(begin, end);
  });

  console.log($scope.filteredBills);

});

The Repository:

app.factory('AbstractRepository', [

  function () {

    function AbstractRepository(restangular, route) {
      this.restangular = restangular;
      this.route = route;
    }

    AbstractRepository.prototype = {
      getList: function (params) {
        return this.restangular.all(this.route).getList(params).$object;
      },
      get: function (id) {
        return this.restangular.one(this.route, id).get();
      },
      getView: function (id) {
        return this.restangular.one(this.route, id).one(this.route + 'view').get();
      },
      update: function (updatedResource) {
        return updatedResource.put().$object;
      },
      create: function (newResource) {
        return this.restangular.all(this.route).post(newResource);
      },
      remove: function (object) {
        return this.restangular.one(this.route, object.id).remove();
      }
    };

    AbstractRepository.extend = function (repository) {
      repository.prototype = Object.create(AbstractRepository.prototype);
      repository.prototype.constructor = repository;
    };

    return AbstractRepository;
  }
]);

Setting up the BillRepository:

app.factory('BillRepository', ['Restangular', 'AbstractRepository',
  function (restangular, AbstractRepository) {

    function BillRepository() {
      AbstractRepository.call(this, restangular, 'bills');
    }

    AbstractRepository.extend(BillRepository);
    return new BillRepository();
  }
]);

Any light you can shed on this issue would greatly be appreciated!


Solution

  • Thanks goes to @ErikAGriffin for his help with this.

    I made a change in my repository and removed the $object as shown below:

    getList: function (params) {
        return this.restangular.all(this.route).getList(params);
    },
    

    Then my controller changed to the following:

    app.controller('BillsListCtrl', function ($scope, BillRepository) {
        $scope.filteredBills = [],
        $scope.currentPage = 1,
        $scope.itemsPerPage = 10;
    
        $scope.bills = BillRepository.getList().$object;
    
        BillRepository.getList().then(function(data){
            $scope.filteredBills = data.slice(0, $scope.itemsPerPage);
        });
    
        $scope.$watch('currentPage + itemsPerPage', function() {
            var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
             end = begin + $scope.itemsPerPage;
    
            $scope.filteredBills = $scope.bills.slice(begin, end);
        });
    });