從角度和分頁獲取下一組和前一組記錄

我已經拿出this plunker來顯示我的問題。從角度和分頁獲取下一組和前一組記錄

我在尋找的行爲是，當用戶點擊右箭頭時，它會轉到下一頁，左箭頭轉到上一頁。如果用戶在第10頁上，那麼當點擊右箭頭時，突出顯示分頁鏈接上顯示的頁數2-11和11。

如果他們再次點擊右箭頭，它會更改3-12和12中分頁鏈接上顯示的頁面數。這將繼續進行，直到第20頁達到，然後不會讓他們進一步。如果第1頁上的用戶點擊左箭頭不起作用，還應該通過遞減來繼續工作。希望這是明確的。

HTML：

<ul class="pagination pagination-lg"> 
     <li class="page-item"> 
     <a href="#" ng-click="search($index-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a> 
     </li> 
     <li ng-class="currentPage === $index+1 ? 'active' : ''" ng-repeat="i in getNumber(numberOfPages) track by $index"><a class="page-link" href="#" ng-click="search($index+1)">{{$index+1}}</a></li> 
     <li class="page-item"> 
     <a href="#" ng-click="search($index+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> 
     </li> 
    </ul>

角/ JS：

$scope.search = function(index){ 
     $scope.currentPage = index; 

     $http.get('https://jsonplaceholder.typicode.com/todos').then(function (response) { 
     var temp = response.data; 
     $scope.data = temp.splice(pageSize * (index-1), 10); 
     }) 
    }

完全代碼見this plunker。任何幫助讚賞。

來源

2017-02-17 Paolo B

所以我的可能的解決方案的主要想法是與頁碼而不是試圖跟蹤數組索引的數組。由於這個想法，我做了一些改變。
這是溶液：https://plnkr.co/edit/d1JhJDNskNEMh0G59b9K?p=preview

主要頁面邏輯發生在getNumber()

$scope.getNumber = function() { 

    //Add elements when increasing currentPage 
    for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) { 
    $scope.pages.shift(); 
    $scope.pages.push($scope.currentPage); 
    } 

    //Add elements when decreasing currentPage 
    for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) { 
    $scope.pages.pop(); 
    $scope.pages.unshift($scope.currentPage); 
    } 

    return $scope.pages; 
}

這種方法保持與頁碼陣列的軌道，並增加了頁面編號，如果當前頁是比過去的頁面編號更大數組和其他方式。你的問題只是一個邏輯問題。

我已經添加了下面的所有代碼，所以不需要重新啓動。

首先javascript的那麼HTML

(function() { 
 

 
    var app = angular.module('app', []); 
 

 
}()); 
 

 
(function(module) { 
 

 
    var demoController = function($http, $scope) { 
 

 
    $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) { 
 
     $scope.data = response.data; 
 
    }) 
 

 
    var pageSize = 10; 
 
    var totalItems = 200; 
 

 
    $scope.numberOfPages = totalItems/pageSize; 
 
    $scope.currentPage = 0; 
 
    $scope.pages = new Array(pageSize); 
 
    for (var i = 1; i <= pageSize; i++) { 
 
     $scope.pages[i - 1] = i; 
 
    } 
 

 

 
    $scope.getNumber = function() { 
 

 
     //Add elements when increasing currentPage 
 
     for (var i = 0; i < $scope.currentPage - $scope.pages[$scope.pages.length - 1]; i++) { 
 
     $scope.pages.shift(); 
 
     $scope.pages.push($scope.currentPage); 
 
     } 
 

 
     //Add elements when decreasing currentPage 
 
     for (var i = 0; i < $scope.pages[0] - $scope.currentPage; i++) { 
 
     $scope.pages.pop(); 
 
     $scope.pages.unshift($scope.currentPage); 
 
     } 
 

 
     return $scope.pages; 
 
    } 
 

 
    $scope.search = function(index) { 
 
     if (index <= 0 || index > totalItems/pageSize) return; 
 
     $scope.currentPage = index; 
 

 
     $http.get('https://jsonplaceholder.typicode.com/todos').then(function(response) { 
 
     var temp = response.data; 
 
     $scope.data = temp.splice(pageSize * (index - 1), 10); 
 
     }) 
 

 
    } 
 

 
    }; 
 

 
    module.controller("demoController", demoController); 
 

 
}(angular.module("app")));

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 

 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="app.js"></script> 
 
    <script src="ctrl.js"></script> 
 
    </head> 
 

 
    <body ng-app="app"> 
 
    <div class="container"> 
 
     <h1>Hello Plunker!</h1> 
 
     
 
     <div ng-controller="demoController" ng-init="search(1)"> 
 
     
 
     <div ng-repeat="item in data"> 
 
      <div>{{item.id}} {{item.title}}</div> 
 
     </div> 
 
     
 
     <ul class="pagination pagination-lg"> 
 
      <li class="page-item"> 
 
      <a href="#" ng-click="search(currentPage-1)"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a> 
 
      </li> 
 
      <li ng-class="currentPage === i ? 'active' : ''" ng-repeat="i in getNumber() track by $index"><a class="page-link" href="#" ng-click="search(i)">{{i}}</a></li> 
 
      <li class="page-item"> 
 
      <a href="#" ng-click="search(currentPage+1)"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> 
 
      </li> 
 
     </ul> 
 
     
 
     </div> 
 
     
 
    </div> 
 
    </body> 
 

 
</html>

來源

2017-02-17 20:00:10

從角度和分頁獲取下一組和前一組記錄

回答

相關問題