[英]Break table row after some value using Angular.js
我有一张桌子,我需要当序列号高于10
它会再次转移到下一列序列号将从11
开始。
这是我的代码:
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<colgroup>
<col class="col-md-1 col-sm-1">
<col class="col-md-4 col-sm-4">
</colgroup>
<thead>
<tr>
<th>Sl. No</th>
<th>Generated Code</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="c in listOfViewCode">
<td>{{$index+1}}</td>
<td>{{c.generated_code}}</td>
</tr>
</tbody>
</table>
其实我需要以下格式。
sl no Generated Code sl no Generated Code
1 aaa 11 ssss
2 sss 12 gggg
3 eee
4 cccc
5 tttt
6 bbbb
7 nnnn
8 nnnn
9 bbbb
10 cccc
新表:
<table class="table table-bordered table-striped table-hover" id="dataTable" ng-repeat="group in groups" style="float:left" >
<colgroup>
<col class="col-md-1 col-sm-1">
<col class="col-md-3 col-sm-3">
</colgroup>
<thead>
<tr>
<th>Sl. No</th>
<th>Generated Code</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="g in group.values">
<td>{{$parent.$index * 10 + $index + 1}}</td>
<td>{{g.generated_code}}</td>
</tr>
</tbody>
</table>
假设我有100
条数据。 当序列号越过10
,它会移到右侧,两列相同,依此类推。 我正在使用 Angular.js。
另一种处理方法,适用于从 1 到 10 的任意数量的列将执行以下操作:
var newList = [];
for(var i = 0; i<listOfViewCode.length; i++) {
var index = i+1;
var listIndex = (i%10);
var row = newList[listIndex];
if(row == null) {
row = [];
}
listOfViewCode[i].index = index;
row.push(listOfViewCode[i]);
newList[listIndex] = row;
}
然后使用 ng-repeat-start 进行渲染。
<tr ng-repeat="c in newList">
<td ng-repeat-start="p in c">{{p.index}}</td>
<td ng-repeat-end>{{p.generated_code}}</td>
</tr>
好的,所以我能想到的最好的方法是创建多个表并使用 css 为它们提供一张表的外观......
这是 plunker: http ://plnkr.co/edit/ZQ1NpOa96IpzSncbFSud?p=preview
在你的模板中是这样的:
<table ng-repeat="group in groups" style="float: left">
<thead>
<tr>
<th><b>Sl. No</b></th>
<th><b>Generated Code</b></th>
</tr>
</thead>
<tr ng-repeat="g in group.values">
<td>{{$parent.$index * 10 + $index + 1}}</td>
<td>{{g.value}}</td>
</tr>
</table>
然后我们需要将您的数据分解成块并将它们分配给一个“组”......所以在控制器中我们做这样的事情:
var items = [{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'bbb'},{value: 'aaa'},{value: 'aaa'},{value: 'aaa'},{value: 'aaa'},{value: 'aaa'},{value: 'ccc'},{value: 'ccc'},{value: 'ccc'},{value: 'ccc'},{value: 'ccc'},{value: 'ddd'},{value: 'ddd'},{value: 'ddd'},{value: 'ddd'},{value: 'ddd'},{value: 'eee'},{value: 'eee'},{value: 'eee'},{value: 'eee'},{value: 'eee'},{value: 'fff'},{value: 'fff'},{value: 'fff'},{value: 'fff'},{value: 'fff'},{value: 'ggg'},{value: 'ggg'},{value: 'ggg'},{value: 'ggg'},{value: 'ggg'},{value: 'hhh'},{value: 'hhh'},{value: 'hhh'},{value: 'hhh'},{value: 'hhh'},{value: 'iii'},{value: 'iii'},{value: 'iii'},{value: 'iii'},{value: 'iii'}];
$scope.groups = [];
// break the data into chunks of 10
var i,j,temparray,chunk = 10;
for (i=0,j=items.length; i<j; i+=chunk) {
temparray = items.slice(i,i+chunk);
$scope.groups.push({values: temparray});
}
这将创建每行 10 行的表格(最后一行包含剩余的行),并排(使用 style="float: left")...我能想到的最好的办法。 希望能帮助到你!
我建议制作两个表格,因为它看起来像你真正在做什么。 因此,创建一个函数可以为您提供元素 1-10 和一个可以为您提供 10 及以上元素的函数,然后按照您已经在做的事情做。
或者,如果您真的希望它们在一个表中,您可以创建一个包含每行元素数组的数组 - 因此元素在元素 % 10 时相同。例如类似的东西。
var newList = [];
for(var i = 0; i<listOfViewCode; i++) {
var index = i+1;
var row = newList[i%10];
if(row == null) {
row = [];
}
row.push(listOfViewCode[i]);
newList[i%10] = row;
}
然后你在 ng-repeat 中有一个嵌套的 ng-repeat 并渲染它们。
更新:像这样
它可能是这样的
<tr ng-repeat="c in newList">
<td>{{$index+1}}</td>
<td>{{c[0].generated_code}}</td>
<td>{{$index+11}}</td>
<td>{{c[1].generated_code}}</td>
</tr>
请看下面的代码-:
代码-:
<div ng-controller="MyCtrl">
<table id="dataTable" style="float: left;" ng-repeat="c in [0,10,20,30,40,50,60,70,80,90]" ng-init="newlist=listOfViewCode.slice(c,c+10)">
<colgroup>
<col >
<col>
</colgroup>
<thead>
<tr>
<th>Sl. No</th>
<th>Generated Code</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="c in newlist">
<td>{{$index+c}}</td>
<td>{{c}}</td>
</tr>
</tbody>
</table>
</div>
控制器代码:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.listOfViewCode=[];
for(var i=0;i<100;i++)
{
$scope.listOfViewCode[i]=i+1;
}
}
我刚刚展示了一个例子来帮助你实现你正在尝试做的事情。希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.