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!
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);
});
});