Question

这就是我现在拥有的东西（我也从其他SO答案和教程中尝试过很多东西但无济于事）：

simpleImageReview.js：

var app = angular.module("simpleImageReview", ['ui.bootstrap']);

imgViewerCtrl.js：

app.controller("imgViewerCtrl", function($scope, $http) {
    $scope.imgList = [];
    $http.get("http://127.0.0.1:5000/api/file_metadata").success(
        function(data, status, headers, config) {
            $scope.data = data;
            $scope.totalImgs = $scope.data.num_results;
            $scope.totalPages = $scope.data.total_pages;
            $scope.currentPage = $scope.data.page;
            $scope.imgList = $scope.data.objects;
            $scope.imgsPerPage = 10;
        });
});

index.html （已删除）：

... header, imports, etc. - no issues with this

<body ng-app="simpleImageReview">
<div ng-controller="imgViewerCtrl">
    <ul>
        <li>
            <li ng-repeat="img in imgList">
                <img src="{{img.local_path}}" border="0" width="153" height="204">
        </li>
    </ul>

    <pagination 
        total-items="totalImgs" 
        items-per-page="imgsPerPage" 
        ng-model="currentPage" 
        max-size="totalPages" 
        class="pagination-sm" 
        boundary-links="true">
    </pagination>
</div>
</body>

... footer, more imports - no issues with this

图像显示正常，因此API按预期工作。点击下一页什么都不做。我想我在某种程度上需要更新视图，但我不确定如何解决这个问题。

我做错了什么？

Answer 1

您需要手动创建一个新数组，该数组仅包含当前页面上显示的对象子集。然后，将ng-model指向此数组，而不是整个数据数组。所以在页面加载时，假设你想在第一页开始：

$scope.paginatedList = $scope.imgList.slice(0, $scope.imgsPerPage);

您还需要在分页指令上使用ng-change指令，当$ scope.currentPage更改时，您可以使用该指令更新paginatedList。

在你的HTML中......

<pagination 
            ng-change="pageChanged()"
            total-items="totalImgs" 
            items-per-page="imgsPerPage" 
            ng-model="currentPage" 
            max-size="totalPages" 
            class="pagination-sm" 
            boundary-links="true">
    </pagination>

在你的控制器......

$scope.paginatedList = $scope.imgList.slice(0, $scope.imgsPerPage);

function pageChanged(){

      var begin = (($scope.currentPage - 1) * $scope.imgsPerPage),
          end   = begin + $scope.imgsPerPage;

      $scope.paginatedList = $scope.imgList.slice(begin, end);

}

这是一个有效的plunker

分页没有使用ui-bootstrap工作AngularJS 1.4

1 个答案: