如何实现与Angular.js分页/表格布局？ [英] How to achieve pagination/table layout with Angular.js?
本文介绍了如何实现与Angular.js分页/表格布局？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
比方说，我收到一个对象文本与15岁以上的对象，我需要一个很好的布局，以显示他们（不是所有的一排），什么是控制时，该行应突破/页应该结束的最有效的方法？
现在，我使用的表行的NG-重复，而结果是一个细长的表有一列。
修改作出澄清。可以有对象/多PARAMS中的对象。这是我的目标：
$ scope.zones = [
{名：1区
活动：1}，
{名：2区
活动：1}，
{名：3区
活动：0}，
{名：4区
活动：0}，
{名：5区
活动：0}，
{名：6区
活动：0}，
{名：7区
活动：1}，
{名：8区
活动：0}，
{名：9区
活动：0}，
{名：10区
活动：0}，
{名：11区，
活动：1}，
{名：12区，
活动：1}，
{名：13区，
活动：0}，
{名：14区
活动：0}，
{名：15区，
活动：1}，
];
解决方案
我会用表和实施分页控制器来控制多少显示和按钮移动到下一个页面。 这小提琴可能会帮助你。
＆LT;表类=table表条纹表凝聚表悬停＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
百分位类=ID＆GT; ID和放大器; NBSP;＆LT;一个NG点击=sort_by（'身份证'）＆GT;＆LT; I类=图标排序＆GT;＆LT; I＆GT /;＆LT; / A＆GT;＆LT; /第i
百分位类=名＆GT;名称和放大器; NBSP;＆LT;一个NG点击=sort_by（'名'）＆GT;＆LT; I类=图标排序＆GT;＆LT; I＆GT /;＆LT; / A＆GT;＆LT; /第i
百分位类=描述＆GT;简介＆安培; NBSP;＆LT;一个NG点击=sort_by（'描述'）＆GT;＆LT; I类=图标排序＆GT;＆LT; I＆GT /;＆LT; / A＆GT;＆LT; /第i
百分位类=FIELD3＆GT;现场3及NBSP;＆LT;一个NG点击=sort_by（'FIELD3'）＆GT;＆LT; I类=图标排序＆GT;＆LT; I＆GT /;＆LT ; / A＆GT;＆LT; /第i
百分位级=字段4＆GT;现场4安培; NBSP;＆LT;一个NG点击=sort_by（'字段4'）＆GT;＆LT; I类=图标排序＆GT;＆LT; I＆GT /;＆LT ; / A＆GT;＆LT; /第i
百分位级=字段5＆GT;现场5安培; NBSP;＆LT;一个NG点击=sort_by（'字段5'）＆GT;＆LT; I类=图标排序＆GT;＆LT; I＆GT /;＆LT ; / A＆GT;＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TFOOT GT;
＆LT; TD合并单元格=6＆GT;
＆LT; DIV CLASS =分页右拉式＆GT;
＆LT; UL＆GT;
＆LT;李纳克级={禁用：当前页== 0}＆GT;
＆LT; A HREF NG点击=prevPage（）＆GT;«preV＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT;李NG重复=N范围内（pagedItems.length）
NG-CLASS ={活跃：N ==当前页}
NG-点击=setPage（）＆GT;
＆所述; A HREF纳克绑定=N + 1→1＆下; / A＆GT;
＆LT; /李＆GT;
＆LT;李纳克级={禁用：当前页== pagedItems.length - 1}＆GT;
＆LT; A HREF NG点击=下一页（）＆gt;接下来»＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
＆LT; / TFOOT＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复=项pagedItems [当前页] |排序依据：sortingOrder：反转＆GT;
＆所述; TD＆GT; {{item.id}}＆下; / TD＆GT;
＆所述; TD＆GT; {{item.name}}＆下; / TD＆GT;
＆所述; TD＆GT; {{item.description}}＆下; / TD＆GT;
＆所述; TD＆GT; {{item.field3}}＆下; / TD＆GT;
＆所述; TD＆GT; {{item.field4}}＆下; / TD＆GT;
＆所述; TD＆GT; {{item.field5}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
在拨弄例如$ scope.range应该是：
$ scope.range =功能（大小，开始，结束）{
VAR RET = [];
的console.log（大小，起点，终点）; 如果（大小与LT端）{
最终=大小;
如果（大小＆LT; $ scope.gap）{
开始= 0;
}其他{
开始= $大小 - scope.gap;
} }
对于（VAR I =启动; I＆LT; END;我++）{
ret.push（ⅰ）;
}
的console.log（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屋！
查看全文
