如何用Angular.js实现分页/表格布局?

比方说,我收到了15+对象的对象文字,我需要在一个不错的布局(不是所有的行)中显示它们,什么是最有效的方法来控制行应该打破/页面应该结束?

现在我在表行上使用了ng-repeat,结果是一列很长的一列。

编辑澄清。 可以有对象内的对象/更多的参数。 这是我的目标:

$scope.zones = [ {"name": "Zone 1", "activity": "1"}, {"name": "Zone 2", "activity": "1"}, {"name": "Zone 3", "activity": "0"}, {"name": "Zone 4", "activity": "0"}, {"name": "Zone 5", "activity": "0"}, {"name": "Zone 6", "activity": "0"}, {"name": "Zone 7", "activity": "1"}, {"name": "Zone 8", "activity": "0"}, {"name": "Zone 9", "activity": "0"}, {"name": "Zone 10", "activity": "0"}, {"name": "Zone 11", "activity": "1"}, {"name": "Zone 12", "activity": "1"}, {"name": "Zone 13", "activity": "0"}, {"name": "Zone 14", "activity": "0"}, {"name": "Zone 15", "activity": "1"}, ]; 

7 Solutions collect form web for “如何用Angular.js实现分页/表格布局?”

我将使用表格并在控制器中实现分页以控制显示的数量和button移动到下一页。 这小提琴可能会帮助你。

分页的例子

  <table class="table table-striped table-condensed table-hover"> <thead> <tr> <th class="id">Id&nbsp;<a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th> <th class="name">Name&nbsp;<a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th> <th class="description">Description&nbsp;<a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th> <th class="field3">Field 3&nbsp;<a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th> <th class="field4">Field 4&nbsp;<a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th> <th class="field5">Field 5&nbsp;<a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th> </tr> </thead> <tfoot> <td colspan="6"> <div class="pagination pull-right"> <ul> <li ng-class="{disabled: currentPage == 0}"> <a href ng-click="prevPage()">« Prev</a> </li> <li ng-repeat="n in range(pagedItems.length)" ng-class="{active: n == currentPage}" ng-click="setPage()"> <a href ng-bind="n + 1">1</a> </li> <li ng-class="{disabled: currentPage == pagedItems.length - 1}"> <a href ng-click="nextPage()">Next »</a> </li> </ul> </div> </td> </tfoot> <tbody> <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{item.field3}}</td> <td>{{item.field4}}</td> <td>{{item.field5}}</td> </tr> </tbody> </table> 

小提琴例子中的$ scope.range应该是:

 $scope.range = function (size,start, end) { var ret = []; console.log(size,start, end); if (size < end) { end = size; if(size<$scope.gap){ start = 0; }else{ start = size-$scope.gap; } } for (var i = start; i < end; i++) { ret.push(i); } console.log(ret); return ret; }; 

我使用这个解决scheme:

因为我使用ng-repeat="obj in objects | filter : paginate"来过滤行,所以它更简洁一些。 也使它与$资源工作:

http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview

这是我的解决scheme。 @Maxim Shoustin的解决scheme有一些sorting问题。 我也把整个事情包装成一个指令。 唯一的依赖是UI.Bootstrap.pagination,它在分页上做得很好。

这里是抢劫犯

这里是github源代码。

在这里我已经解决了我的angularJS分页问题,​​在服务器端+查看结束您可以检查代码将更有效的一些更多的调整。 我所要做的只是把两个值的起始号码和结束号码,它将代表返回的json数组的索引。

这里是angular度

 var refresh = function () { $('.loading').show(); $http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) { $scope.devices = response; $('.loading').hide(); }); }; 

如果你仔细看看$ scope.CountStart和$ scope.CountStart是两个参数,我传递的API

这里是下一个button的代码

 $scope.nextPage = function () { $('.loading').css("display", "block"); $scope.nextPageDisabled(); if ($scope.currentPage >= 0) { $scope.currentPage++; $scope.CountStart = $scope.CountStart + $scope.DevicePerPage; $scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage; refresh(); } }; 

这里是前一个button的代码

 $scope.prevPage = function () { $('.loading').css("display", "block"); $scope.nextPageDisabled(); if ($scope.currentPage > 0) { $scope.currentPage--; $scope.CountStart = $scope.CountStart - $scope.DevicePerPage; $scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage; refresh(); } }; 

如果页码是零,我的上一个button将被禁用

  $scope.nextPageDisabled = function () { console.log($scope.currentPage); if ($scope.currentPage === 0) { return false; } else { return true; } }; 

表与papgingsortingfilter

在这里输入图像说明

请参阅Angularjs表格sortingfilter和分页的完整示例

最好的简单即插即用解决scheme分页。

https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/#comment-1002

你将需要用自定义指令replaceng-repeat。

 <tr dir-paginate="user in userList|filter:search |itemsPerPage:7"> <td>{{user.name}}</td></tr> 

在页面中,你只需要添加

 <div align="center"> <dir-pagination-controls max-size="100" direction-links="true" boundary-links="true" > </dir-pagination-controls> </div> 

在你的index.html加载

 <script src="./js/dirPagination.js"></script> 

在你的模块只是添加依赖

 angular.module('userApp',['angularUtils.directives.dirPagination']); 

而这一切都需要分页。

可能对某人有帮助。

  • 元素中的Ang-ng重复条件包装项(ng-repeat中的组项)
  • 如何使ng-repeat过滤掉重复的结果
  • 如果ng-repeat与expression式匹配,则跳过一个项目
  • ng-repeat:访问对象数组中每个对象的键和值
  • 如果嵌套的ng-repeat不是空的,我怎样才能显示一个元素?
  • angularjs文本区字符计数器
  • 通过一个布尔属性来过滤一个Angular 1.2 ng-repeat和“track by”
  • AngularJS - 如何获得一个ngRepeat过滤的结果参考
  • AngularJS集团指令没有外部依赖
  • 在Angular中,如何将JSON对象/数组传递给指令?
  • 在表内的行上使用ng-repeat和ng-class