角度とページ番号を使用して配列からレコードの次と前のセットを取得する

私は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; 
}

に起こる。この方法は、ページ番号を持つ配列を追跡し、currentPageには、内の最後のページ番号よりも大きい場合pagenumbersを追加配列とそれ以外の方法です。あなたの問題は論理の問題に過ぎません。

以下のすべてのコードを追加しました。したがって、プランナーは必要ありません。

まず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

角度とページ番号を使用して配列からレコードの次と前のセットを取得する

答えて

関連する問題