如何用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"}, ]; 我将使用表格并在控制器中实现分页以控制显示的数量和button移动到下一页。 这小提琴可能会帮助你。
<table class="table table-striped table-condensed table-hover"> <thead> <tr> <th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th> <th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th> <th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th> <th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th> <th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th> <th class="field5">Field 5 <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; };
这是我为分页find的最简单的例子！ http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/
我使用这个解决scheme：
因为我使用ng-repeat="obj in objects | filter : paginate"来过滤行，所以它更简洁一些。 也使它与$资源工作：
这是我的解决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; } };
表与papging ， sorting和filter
请参阅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']);
而这一切都需要分页。
可能对某人有帮助。
