如何使用 Angular.js 实现分页/表格布局? [英] How to achieve pagination/table layout with Angular.js?
本文介绍了如何使用 Angular.js 实现分页/表格布局?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设我收到一个包含 15 个以上对象的对象文字，我需要以漂亮的布局显示它们(不是全部排成一行)，控制行应该中断/页面何时结束的最有效方法是什么?
现在我在表格行上使用 ng-repeat，结果是一张长而薄的表格，只有一列.
编辑以澄清.可以在对象/更多参数中包含对象.这是我的对象:
$scope.zones = [{"name": "区域 1",活动":1"}，{"name": "区域 2",活动":1"}，{"name": "区域 3",活动":0"}，{"name": "第 4 区",活动":0"}，{"name": "第 5 区",活动":0"}，{"name": "区域 6",活动":0"}，{"name": "7 区",活动":1"}，{"name": "第 8 区",活动":0"}，{"name": "第 9 区",活动":0"}，{"name": "10 区",活动":0"}，{"name": "11 区",活动":1"}，{"name": "12 区",活动":1"}，{"name": "13 区",活动":0"}，{"name": "14 区",活动":0"}，{"name": "15 区",活动":1"}，]; 解决方案
我会使用 table 并在控制器中实现分页来控制显示的数量和移动到下一页的按钮.这个小提琴可能对你有帮助.
<头><tr><th class="id">Id<a ng-click="sort_by('id')"><i class="icon-sort"></i></a><th class="name">Name<a ng-click="sort_by('name')"><i class="icon-sort"></i></a><th class="description">Description<a ng-click="sort_by('description')"><i class="icon-sort"></i></a><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><脚><td colspan="6"><div class="pagination pull-right"><ul><li ng-class="{disabled: currentPage == 0}"><a href ng-click="prevPage()">« Prev</a><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 ng-class="{disabled: currentPage == pagedItems.length - 1}"><a href ng-click="nextPage()">下一步 »</a></td></tfoot>
<tr ng-repeat="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>
小提琴示例中的 $scope.range 应该是:
$scope.range = 函数(大小，开始，结束){var ret = [];控制台日志(大小，开始，结束)；如果(大小<结束){结束 = 大小；如果(大小<$scope.gap){开始 = 0;}别的{开始 = 大小-$scope.gap;}}for (var i = start; i < end; i++) {ret.push(i);}控制台日志(ret)；返回 ret;};Let's say I receive an object literal with 15+ objects and I need to display them in a nice layout (not all in a row), what is the most efficient method for controlling when the line should break/page should end?
Right now I'm using ng-repeat on table row's, and the result is a long thin table with one column.
Edit for clarification. Could have objects within objects/more params. Here is my object:
$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"},
];
解决方案
I would use table and implement the pagination in the controller to control how much is shown and buttons to move to the next page. This Fiddle might help you.
<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>
the $scope.range in the fiddle example should be:
$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;
};
这篇关于如何使用 Angular.js 实现分页/表格布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
