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