AngularJS Paginierung in Dropdown

Question

Ich bin neu in AngularJS Ich verwende sein Raster mit Filtern, Such-, Sortier-und Seitenumbruch Funktionen und alles funktioniert gut für mich, aber eine Sache irritiert mich sehr, um seine Seitennummerierung in Drop-Down-Box zu konvertieren wählen Sie die Seitenzahl wie diese

<select name="pagination" class="form-control selectpicker"> 
    <option value="fpage">First Page</option> 
    <option value="p1">Page 1</option> 
    <option value="p2">Page 2</option> 
    <option value="p3">Page 3</option> 
    <option value="lpage">Last Page</option> 
</select> 

statt Paginierung list-items. Ich habe versucht, nach der gleichen Lösung zu suchen, bekomme aber nicht das Richtige aus dem Internet.

Hier ist mein HTML-Code, die Paginierung

<div class="col-md-12" ng-show="filteredItems == 0"> 
<div class="col-md-12"> 
<h4>No products found</h4> 
</div> 
</div> 

<div class="col-md-12" ng-show="filteredItems > 0"> 
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"> 
</div> 
</div> 

auffüllt und hier ist mein AngularJS Code

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

app.filter('startFrom', function() { 
    return function(input, start) { 
     if(input) { 
      start = +start; //parse to int 
      return input.slice(start); 
     } 
     return []; 
    } 
}); 
app.controller('customersCrtl', function ($scope, $http, $timeout) { 
    $http.get('includes/modServices/getServices.php').success(function(data){ 
     $scope.list = data; 
     $scope.currentPage = 1; //current page 
     $scope.entryLimit = 50; //max no of items to display in a page 
     $scope.filteredItems = $scope.list.length; //Initially for no filter 
     $scope.totalItems = $scope.list.length; 
    }); 
    $scope.setPage = function(pageNo) { 
     $scope.currentPage = pageNo; 
    }; 
    $scope.filter = function() { 
     $timeout(function() { 
      $scope.filteredItems = $scope.filtered.length; 
     }, 10); 
    }; 
    $scope.sort_by = function(predicate) { 
     $scope.predicate = predicate; 
     $scope.reverse = !$scope.reverse; 
    }; 
}); 

Answer 1

Im Folgenden ist der Code, der einen Drop-Down verwendet Seitennummer oder Paginierung mit Dropdown-Liste auszuwählen. Lass es mich wissen, wenn du Hilfe brauchst.

angular.module('pagination', []); 
 
var PaginationDemoCtrl = function ($scope) { 
 
    $scope.data = [{"name":"Bell","id":"K0H 2V5"},{"name":"Octavius","id":"X1E 6J0"},{"name":"Alexis","id":"N6E 1L6"},{"name":"Colton","id":"U4O 1H4"},{"name":"Abdul","id":"O9Z 2Q8"},{"name":"Ian","id":"Q7W 8M4"},{"name":"Eden","id":"H8X 5E0"},{"name":"Britanney","id":"I1Q 1O1"},{"name":"Ulric","id":"K5J 1T0"},{"name":"Geraldine","id":"O9K 2M3"},{"name":"Hamilton","id":"S1D 3O0"},{"name":"Melissa","id":"H9L 1B7"},{"name":"Remedios","id":"Z3C 8P4"},{"name":"Ignacia","id":"K3B 1Q4"},{"name":"Jaime","id":"V6O 7C9"},{"name":"Savannah","id":"L8B 8T1"},{"name":"Declan","id":"D5Q 3I9"},{"name":"Skyler","id":"I0O 4O8"},{"name":"Lawrence","id":"V4K 0L2"},{"name":"Yael","id":"R5E 9D9"},{"name":"Herrod","id":"V5W 6L3"},{"name":"Lydia","id":"G0E 2K3"},{"name":"Tobias","id":"N9P 2V5"},{"name":"Wing","id":"T5M 0E2"},{"name":"Callum","id":"L9P 3W5"},{"name":"Tiger","id":"R9A 4E4"},{"name":"Summer","id":"R4B 4Q4"},{"name":"Beverly","id":"M5E 4V4"},{"name":"Xena","id":"I8G 6O1"},{"name":"Yael","id":"L1K 5C3"},{"name":"Stacey","id":"A4G 1S4"},{"name":"Marsden","id":"T1J 5J3"},{"name":"Uriah","id":"S9S 8I7"},{"name":"Kamal","id":"Y8Z 6X0"},{"name":"MacKensie","id":"W2N 7P9"},{"name":"Amelia","id":"X7A 0U3"},{"name":"Xavier","id":"B8I 6C9"},{"name":"Whitney","id":"H4M 9U2"},{"name":"Linus","id":"E2W 7U1"},{"name":"Aileen","id":"C0C 3N2"},{"name":"Keegan","id":"V1O 6X2"},{"name":"Leonard","id":"O0L 4M4"},{"name":"Honorato","id":"F4M 8M6"},{"name":"Zephr","id":"I2E 1T9"},{"name":"Karen","id":"H8W 4I7"},{"name":"Orlando","id":"L8R 0U4"},{"name":"India","id":"N8M 8F4"},{"name":"Luke","id":"Q4Y 2Y8"},{"name":"Sophia","id":"O7F 3F9"},{"name":"Faith","id":"B8P 1U5"},{"name":"Dara","id":"J4A 0P3"},{"name":"Caryn","id":"D5M 8Y8"},{"name":"Colton","id":"A4Q 2U1"},{"name":"Kelly","id":"J2E 2L3"},{"name":"Victor","id":"H1V 8Y5"},{"name":"Clementine","id":"Q9R 4G8"},{"name":"Dale","id":"Q1S 3I0"},{"name":"Xavier","id":"Z0N 0L5"},{"name":"Quynn","id":"D1V 7B8"},{"name":"Christine","id":"A2X 0Z8"},{"name":"Matthew","id":"L1H 2I4"},{"name":"Simon","id":"L2Q 7V7"},{"name":"Evan","id":"Z8Y 6G8"},{"name":"Zachary","id":"F4K 8V9"},{"name":"Deborah","id":"I0D 4J6"},{"name":"Carl","id":"X7H 3J3"},{"name":"Colin","id":"C8P 0O1"},{"name":"Xenos","id":"K3S 1H5"},{"name":"Sonia","id":"W9C 0N3"},{"name":"Arsenio","id":"B0M 2G6"},{"name":"Angela","id":"N9X 5O7"},{"name":"Cassidy","id":"T8T 0Q5"},{"name":"Sebastian","id":"Y6O 0A5"},{"name":"Bernard","id":"P2K 0Z5"},{"name":"Kerry","id":"T6S 4T7"},{"name":"Uriel","id":"K6G 5V2"},{"name":"Wanda","id":"S9G 2E5"},{"name":"Drake","id":"G3G 8Y2"},{"name":"Mia","id":"E4F 4V8"},{"name":"George","id":"K7Y 4L4"},{"name":"Blair","id":"Z8E 0F0"},{"name":"Phelan","id":"C5Z 0C7"},{"name":"Margaret","id":"W6F 6Y5"},{"name":"Xaviera","id":"T5O 7N5"},{"name":"Willow","id":"W6K 3V0"},{"name":"Alden","id":"S2M 8C1"},{"name":"May","id":"L5B 2H3"},{"name":"Amaya","id":"Q3B 7P8"},{"name":"Julian","id":"W6T 7I6"},{"name":"Colby","id":"N3Q 9Z2"},{"name":"Cole","id":"B5G 0V7"},{"name":"Lana","id":"O3I 2W9"},{"name":"Dieter","id":"J4A 9Y6"},{"name":"Rowan","id":"I7E 9U4"},{"name":"Abraham","id":"S7V 0W9"},{"name":"Eleanor","id":"K7K 9P4"},{"name":"Martina","id":"V0Z 5Q7"},{"name":"Kelsie","id":"R7N 7P2"},{"name":"Hedy","id":"B7E 7F2"},{"name":"Hakeem","id":"S5P 3P6"}]; 
 
    $scope.totalItems = $scope.data.length; 
 
    $scope.currentPage = 1; 
 
    $scope.itemsPerPage = 10; 
 
    $scope.pages=Math.ceil($scope.data.length/ $scope.itemsPerPage); 
 
    $scope.setPage = function (pageNo) { 
 
    $scope.currentPage = pageNo; 
 
    }; 
 

 
$scope.setItemsPerPage = function(num) { 
 
    $scope.itemsPerPage = num; 
 
    $scope.currentPage = 1; //reset to first paghe 
 
} 
 
$scope.getpagesArray=function(num){ 
 
    return new Array(num); 
 
} 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div ng-controller="PaginationDemoCtrl" ng-app=""> 
 
    Page No:<select ng-model="currentPage"> 
 
     <option ng-repeat="pg in getpagesArray(pages) track by $index">{{$index+1}}</option> 
 
     </select> 
 
    <table class="table"> 
 
    <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))"> 
 
     <td>{{row.name}}</td> 
 
     <td>{{row.id}}</td> 
 
    </tr> 
 
    </table> 
 
</div>

Hoffe, es hilft :)