AngularJS + 分页 + 引导

Question

我有以下 JSON：

http://localhost:3001/images?page=1

        {"images":[{"_id":"542e57a709d2d60000c93953","name":"image1","url":"http://www.syll.com","__v":0},{"_id":"542e58e19d237e5b790f4db2","name":"image154","url":"www.rufyge.com"},{"_id":"542e58e19d237e5b790f4db3","name":"image45784","url":"http://www.test.com"},{"_id":"542eb5bbe26bca641c676ec9","name":"image1","url":"http://www.syll.com","__v":0},{"_id":"542eff1197896530323371b2","name":"image1","url":"http://www.syll.com","__v":0},{"_id":"542f0514b96a17781a5de9ef","name":"image1","url":"http://www.syll.com","__v":0},{"_id":"542f0b618101e35037651a7b","name":"image1","url":"http://www.syll.com","__v":0},{"_id":"543247b7d78ae2dc6a73c4eb","name":"image1","url":"http://www.syll.com","__v":0},{"_id":"543249050fcae2f082ca3e70","name":"imageOCR1","url_image":"http://meta-e.aib.uni-linz.ac.at/ocr/images/biographie_ocr.gif","__v":0},{"_id":"543249050fcae2f082ca3e71","name":"imageOCR2","url_image":"http://www.textcreationpartnership.org/files/2012/02/ocr.jpg","__v":0}],"pageCount":7,"itemCount":66}

与：

"pageCount":7,"itemCount":66

还有：

    http://localhost:3001/images?page=2

    http://localhost:3001/images?page=3

    http://localhost:3001/images?page=4

...

我正在寻找使用 Boostrap 和 AngularJS 进行分页（上一个/下一个）。

我在做：

<div ng-repeat="product in filteredId = (products | filter:search)">
    <h3><a style="cursor: pointer;" ng-click="products.chosen = product">{{product.name}}</a></h3>
</div>

使用我的控制器：

function imageController($scope, $http){
    $scope.showCompanies = function(){
        $http.get('http://localhost:3000/images')
            .success(function(response){
            $scope.products = response;
            console.log(response); })
            .error(function(response){ alert('Une erreur est survenue'); console.log(response); });
    }
    $scope.showCompanies();
}

但是没有分页。

知道如何迭代所有 JSON 并获取 Next/Prev 按钮吗？

感谢您的帮助！

Answer 1

我前段时间为我的一个项目创建了这个分页模板，也许你可以以某种方式使用它？

plnk

js:

angular.module("commonModule").directive('pagination', [function () {
    return {
        restrict: 'E',
        scope: {
            currentPage: "=",
            numOfPages: "=",
            onLinkClicked: "&"
        },
        templateUrl: "pagination-tmpl.html",
        controller: function($scope) {
        },
        link: function($scope) {
        }
    };
}]);

指令模板

<ul class="pagination" data-ng-if="numOfPages > 0">
  <li>{{onLinkClicked}}</li>
    <li data-ng-class="{ disabled: currentPage == 1 }">
        <a href="" data-ng-click="onLinkClicked()(1)">&laquo;</a>
    </li>
    <li data-ng-repeat="i in [] | range:1:numOfPages" data-ng-class="{ active: currentPage == i}">
        <span data-ng-if="currentPage == i">{{i}} <span class="sr-only">(current)</span></span>
        <a data-ng-if="currentPage != i" href="" data-ng-click="onLinkClicked()(i)">{{i}}</a>
    </li>
    <li data-ng-class="{ disabled: currentPage == numOfPages}">
        <a href="" data-ng-click="onLinkClicked()(numOfPages)">&raquo;</a>
    </li>
</ul>

它使用过滤器范围来生成提供最小值和最大值的序列：

angular.module("commonModule").filter("range", function () {
        return function (input, min, max) {
            min = parseInt(min);
            max = parseInt(max);

            for (var i = min; i <= max; i++) {
                input.push(i);
            }

            return input;
        }
    });

用法：

  <pagination 
    data-current-page="pagination.currentPage" 
    data-num-of-pages="pagination.numOfPages"
    data-on-link-clicked="linkClicked()"></pagination>

在您的控制器中，为分页指令提供当前页、页数以及单击分页链接时要执行的函数

angular.module("commonModule").controller("commonCtrl", function($scope) {
  $scope.pagination = {
    currentPage: 1,
    numOfPages: 4
  };

  $scope.linkClicked = function() {
    return function(page) {
      alert(page);
      //insert your data retrieval/processing here
      $scope.pagination.currentPage = page;
    }
  };
});