我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。

我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。

有线索吗?


当前回答

下面的代码将有助于在后端提供自定义分页角repeat。

你的数据会在

$scope.myticketIssuesData = [];
$scope.allticketIssuesData = [];

var jiraapp = angular.module('jiraapp', ['ui.bootstrap']); jiraapp.controller('JiraController', ['$scope', '$http', '$window','$location', function JiraController($scope, $http, $window,$location) { $scope.myticketIssuesData = []; $scope.allticketIssuesData = []; $scope.jiraIssue = {}; $scope.RequesterType = []; $scope.loading = false; $scope.showerror = false; $scope.alert = {}; $scope.maxSize = 10; $scope.totalCount = 0; $scope.pageIndex = 0; $scope.startIndex = 0; $scope.pageSizeSelected = 10; $scope.maxallSize = 10; $scope.totalallCount = 0; $scope.pageallIndex = 0; $scope.startallIndex = 0; $scope.pageallSizeSelected = 10; $scope.getUserTickets = function() { $scope.loading = true; $http({ method: 'GET', url: 'http://localhost:53583/api/Jira/getUserTickets?assignee='+$scope.loc+'&startAt='+ $scope.startIndex +'&maxResults='+$scope.pageSizeSelected, headers: { "Accept": "application/json", "Access-Control-Allow-Origin": "http://localhost:8080", "crossDomain": "true", } }).then(function successCallback(response) { $scope.myticketIssuesData = response.data.issues; $scope.totalCount = response.data.total; $scope.loading = false; }, function errorCallback(response) { $scope.loading = false; }); } $scope.getrequestType = function(){ $http({ method: 'GET', url: 'http://localhost:53583/api/Jira/getrequestType', headers: { "Accept": "application/json", "Access-Control-Allow-Origin": "http://localhost:8080", "crossDomain": "true", } }).then(function successCallback(response) { $scope.RequesterType = response.data.values; }, function errorCallback(response) { }); } $scope.getDropDown = function(){ $scope.getrequestType(); } $scope.initialize = function (item) { $scope.getUserTickets(); $scope.getDropDown(); } $scope.initialize(); $scope.pageChanged = function () { if($scope.pageIndex == 0) $scope.startIndex = 0; else if($scope.pageIndex == 1) $scope.startIndex = 0; else $scope.startIndex = (($scope.pageIndex-1) * $scope.pageSizeSelected); $scope.getUserTickets(); }; $scope.pageallChanged = function () { if($scope.pageallIndex == 0) $scope.startallIndex = 0; else if($scope.pageallIndex == 1) $scope.startallIndex = 0; else $scope.startallIndex = (($scope.pageallIndex-1) * $scope.pageallSizeSelected); $scope.getAllTickets(); }; $scope.changeallPageSize = function () { $scope.pageallIndex = 0; $scope.getAllTickets(); }; $scope.getAllTickets = function() { $scope.loading = true; $http({ method: 'GET', url: 'http://localhost:53583/api/Jira/getAllTickets?startAt='+ $scope.startallIndex +'&maxResults='+$scope.pageallSizeSelected, headers: { "Accept": "application/json", "Access-Control-Allow-Origin": "http://localhost:8080", "crossDomain": "true", } }).then(function successCallback(response) { $scope.allticketIssuesData = response.data.issues; $scope.totalallCount = response.data.total; $scope.loading = false; }, function errorCallback(response) { $scope.loading = false; }); } }]); <html ng-app="jiraapp"> <head> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="/angular.min.js"></script> <script src="/jira.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script> <script src="/ui-bootstrap-tpls-0.13.4.min.js"></script> <!-- this is important --> <style type="text/css"> #loading { position: fixed; top: 50%; left: 50%; margin-top: -5em; margin-left: -10em; } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px } .pagination>li { display: inline } .pagination>li>a, .pagination>li>span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd } .pagination>li:first-child>a, .pagination>li:first-child>span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px } .pagination>li:last-child>a, .pagination>li:last-child>span { border-top-right-radius: 4px; border-bottom-right-radius: 4px } .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { z-index: 3; color: #23527c; background-color: #eee; border-color: #ddd } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 2; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7 } .pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd } .pagination-lg>li>a, .pagination-lg>li>span { padding: 10px 16px; font-size: 18px; line-height: 1.3333333 } .pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span { border-top-left-radius: 6px; border-bottom-left-radius: 6px } .pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span { border-top-right-radius: 6px; border-bottom-right-radius: 6px } .pagination-sm>li>a, .pagination-sm>li>span { padding: 5px 10px; font-size: 12px; line-height: 1.5 } .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span { border-top-left-radius: 3px; border-bottom-left-radius: 3px } .pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span { border-top-right-radius: 3px; border-bottom-right-radius: 3px } .pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none } .pager li { display: inline } .pager li>a, .pager li>span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; border-radius: 15px } .pager li>a:focus, .pager li>a:hover { text-decoration: none; background-color: #eee } .pager .next>a, .pager .next>span { float: right } .pager .previous>a, .pager .previous>span { float: left } .pager .disabled>a, .pager .disabled>a:focus, .pager .disabled>a:hover, .pager .disabled>span { color: #777; cursor: not-allowed; background-color: #fff } </style> </head> <body ng-controller="JiraController"> <div class="col-sm-12"> <div class="row" style="background: #09c;"> <div style="margin-left: auto; margin-right: auto;"> <img src="/logo.png" height="80"> <span class="d-none d-sm-inline" style="color: white; font-size: 4rem; vertical-align: middle; font-family:'Source Code Pro'">Jira</span> </div> </div> <div class="row"> <div class="col-sm-12"> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-myticket-tab" data-toggle="tab" href="#nav-myticket" role="tab" aria-controls="nav-myticket" aria-selected="true" ng-click="getUserTickets()">My Ticket</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-myticket" role="tabpanel" aria-labelledby="nav-myticket-tab"> <div class="col-sm-12" style="margin:10px"> <div id="loading" ng-show="loading"> <img src="spinner.gif"> </div> <table ng-show="!loading" class="table table-striped table-bordered table-hover tabel-condensed"> <thead> <tr> <td>Key</td> <td>Priority</td> <td>Summary</td> <td>Assignee</td> <td>Status</td> <td>Due Date</td> </tr> </thead> <tbody> <tr ng-repeat="data in myticketIssuesData"> <td> <a href={{data.fields.customfield_10023._links.web}} target="_blank"> {{data.key}} </a> </td> <td>{{data.fields.priority.name}}</td> <td>{{data.fields.summary}}</td> <td>{{data.fields.assignee.displayName}}</td> <td>{{data.fields.status.name}}</td> <td>{{data.fields.duedate}}</td> </tr> </tbody> <tfoot> <tr> <td align="center" colspan="6"> <!-- <span class="form-group pull-left page-size form-inline"> <select id="ddlPageSize" class="form-control control-color" ng-model="pageSizeSelected" ng-change="changePageSize()"> <option value="5">5</option> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> </select> </span> --> <div class="pull-right"> <pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"> </pagination> <a style="margin-left: 640px;" class="btn btn-primary">Page: {{pageIndex}} / {{numPages}}</a> </div> </td> </tr> </tfoot> </table> </div> </div> </div> </div> </div> </body> </html>

其他回答

我曾经多次使用Angular实现分页,对于一些我觉得可以简化的东西来说,这总是有点麻烦。我使用了这里和其他地方介绍的一些想法来创建一个分页模块,使分页变得简单如下:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

// then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

就是这样。它具有以下特点:

在控制器中不需要自定义代码来将集合项绑定到分页链接。 你不需要使用表格或gridview -你可以对任何你可以重复的东西进行分页! 委托给ng-repeat,所以你可以使用任何可以在ng-repeat中有效使用的表达式,包括过滤、排序等。 跨控制器工作——分页控制指令不需要知道调用paginate指令的上下文的任何信息。

演示:http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

对于那些正在寻找“即插即用”解决方案的人来说,我想你会发现这篇文章很有用。

Code

代码可以在GitHub上找到,包括一组很好的测试:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

如果你感兴趣,我还写了一篇关于模块设计的小文章:http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

Angular UI引导-分页指令

查看UI Bootstrap的分页指令。我最终使用了它,而不是在这里发布的,因为它有足够的功能满足我目前的使用,并有一个完整的测试规范。

View

<!-- table here -->

<pagination 
  ng-model="currentPage"
  total-items="todos.length"
  max-size="maxSize"  
  boundary-links="true">
</pagination>

<!-- items/page select here if you like -->

控制器

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

我做了一个工作活塞供参考。


遗留版本:

View

<!-- table here -->

<div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true"></div>

<!-- items/page select here if you like -->

控制器

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

我做了一个工作活塞供参考。

ng-repeat分页

    <div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
 </select>
<ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
        {{item}}
    </li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
 <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-                 click="currentPage=currentPage+1">
    Next
    </button>
</div>

<script>

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

 app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
 $scope.currentPage = 0;
 $scope.pageSize = 10;
 $scope.data = [];
 $scope.q = '';

 $scope.getData = function () {

  return $filter('filter')($scope.data, $scope.q)

   }

   $scope.numberOfPages=function(){
    return Math.ceil($scope.getData().length/$scope.pageSize);                
   }

   for (var i=0; i<65; i++) {
    $scope.data.push("Item "+i);
   }
  }]);

        app.filter('startFrom', function() {
    return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
   }
  });
  </script>

我在这里提取了相关的部分。这是一个“没有装饰”的表格式寻呼机,所以排序或过滤不包括在内。请根据需要随意更改/添加:

//your data source may be different. the following line is //just for demonstration purposes only var modelData = [{ text: 'Test1' }, { text: 'Test2' }, { text: 'Test3' }]; (function(util) { util.PAGE_SIZE = 10; util.range = function(start, end) { var rng = []; if (!end) { end = start; start = 0; } for (var i = start; i < end; i++) rng.push(i); return rng; }; util.Pager = function(data) { var self = this, _size = util.PAGE_SIZE;; self.current = 0; self.content = function(index) { var start = index * self.size, end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size); return data.slice(start, end); }; self.next = function() { if (!self.canPage('Next')) return; self.current++; }; self.prev = function() { if (!self.canPage('Prev')) return; self.current--; }; self.canPage = function(dir) { if (dir === 'Next') return self.current < self.count - 1; if (dir === 'Prev') return self.current > 0; return false; }; self.list = function() { var start, end; start = self.current < 5 ? 0 : self.current - 5; end = self.count - self.current < 5 ? self.count : self.current + 5; return Util.range(start, end); }; Object.defineProperty(self, 'size', { configurable: false, enumerable: false, get: function() { return _size; }, set: function(val) { _size = val || _size; } }); Object.defineProperty(self, 'count', { configurable: false, enumerable: false, get: function() { return Math.ceil(data.length / self.size); } }); }; })(window.Util = window.Util || {}); (function(ns) { ns.SampleController = function($scope, $window) { $scope.ModelData = modelData; //instantiate pager with array (i.e. our model) $scope.pages = new $window.Util.Pager($scope.ModelData); }; })(window.Controllers = window.Controllers || {}); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <table ng-controller="Controllers.SampleController"> <thead> <tr> <th> Col1 </th> </tr> </thead> <tbody> <tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}"> <td ng-bind-template="{{item.text}}"></td> </tr> </tbody> <tfoot> <tr> <td colspan="4"> <a href="#" ng-click="pages.prev()">&laquo;</a> <a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a> <a href="#" ng-click="pages.next()">&raquo;</a> </td> </tr> </tfoot> </table>

我刚刚做了一个JSFiddle,显示分页+搜索+排序每列使用btford代码:http://jsfiddle.net/SAWsA/11/