Первая и первая страница начальной страницы UI-Bootstrap отображается

Question

В настоящее время я получаю доступ к Restangular и, кажется, продвигаюсь вперед. Я предпочитаю использовать UI-Bootstrap для удобства использования, поскольку я использую прежде всего работу с бутстрапом.

Моя текущая проблема заключается в том, что у меня есть разбиение на страницы, работающие на моем контроллере, однако результаты не появляются при первом посещении страницы. Если я перейду на вторую страницу и вернусь на первую страницу, результаты будут такими, как ожидалось. Если я тогда решит перезагрузить страницу, в любом случае результаты на первой странице не появятся.

Мой код выглядит следующим образом:

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

}); 

Репозиторий:

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

Настройка BillRepository:

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

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

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

Любой свет, который вы можете пролить на этот вопрос будет в значительной степени будет оценили!

Answer 1

Спасибо за помощь @ErikAGriffin за помощь.

Я сделал изменения в своем хранилище и удалить $object, как показано ниже:

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

Тогда мой контроллер изменился следующим:

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

Answer 2

Если $scope.filteredBills - это то, что отображается на странице, вы заполняете эту переменную только при изменении переменной currentPage. Когда ваш код запускается в первый раз, вы устанавливаете переменную, а затем устанавливаете часы на нее, поэтому она не изменяется и фильтруется. Фильтры не устанавливаются.