使用bootstrap的Angular分页.切片未定义.远程数据

Question

我尝试使用Bootstrap UI为我的项目设置分页。

我正在尝试从我制作的API中获取数据。

我目前使用的是uiRouter，我设置了一个HTML页面，其中我的项目呈现

        .state('home', {
        url : '/',
        templateUrl : 'partials/galerija.html',
        controller: function($scope, Picture) {
            $scope.filteredPictures = []
                ,$scope.currentPage = 1
                ,$scope.numPerPage = 18
                ,$scope.maxSize = 5;

            Picture.get('')
                .success(function (data) {
                    $scope.pictures = data;
                })
            $scope.numPages = function () {
                return Math.ceil($scope.pictures.length / $scope.numPerPage);
            };
            $scope.$watch('currentPage + numPerPage', function() {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                    , end = begin + $scope.numPerPage;
                $scope.filteredPictures = $scope.pictures.slice(begin, end);
            });
        }
    })

Picture.get()函数成功获取数据，我可以看到它，但是$scope。当我试图切片时，图片是不明确的。会出什么问题呢?

当我的页面加载时，我看到我的项目列表，这只是分页不想工作。

提前感谢，如果需要更多的细节，请随时询问。

我编辑了一个柱塞，我用它作为例子，并设置了$scope。todos作为我从api获得的数据。

Answer 1

您的代码与柱塞的区别在于success函数的内容。

试着这样修改你的代码:

.state('home', {
    url: '/',
    templateUrl: 'partials/galerija.html',
    controller: function($scope, Picture) {
        $scope.filteredPictures = [], $scope.currentPage = 1, $scope.numPerPage = 18, $scope.maxSize = 5;

        Picture.get('').success(function(data) {
            $scope.pictures = data;
            $scope.numPages = function() {
                return Math.ceil($scope.pictures.length / $scope.numPerPage);
            };
            $scope.$watch('currentPage + numPerPage', function() {
                var begin = (($scope.currentPage - 1) * $scope.numPerPage),
                    end = begin + $scope.numPerPage;
                $scope.filteredPictures = $scope.pictures.slice(begin, end);
            });
        });
    }
});

您将注意到.slice()调用现在在$scope.pictures = data;调用之后同步发生。