使用Angular.js在一些值之后中断表行

I need one help.I have one table and i need when serial number will above the 10 it will again shift to next column serial number will start from 11.

我需要一个帮助。我有一个表,我需要当序列号高于10时它将再次转移到下一列序列号将从11开始。

I am explaining my code below.

我在下面解释我的代码。

 <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>

Actually i need the following format.

其实我需要以下格式。

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

newtable:

<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>

Here i need suppose i have 100 no of data.When serial number will cross 10,it will shift to right side with same two column and so on.I am using Angular.js.

在这里,我需要假设我有100个没有数据。当序列号将穿过10时,它将转移到右侧有相同的两列,依此类推。我正在使用Angular.js。

Please help me.

请帮我。

5 个解决方案

#1

Another way of going about it, that would work for any number of columns from 1-10 would be to do something like:

实现它的另一种方法是,适用于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;
}

And then use ng-repeat-start to render.

然后使用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>

#2

Ok so the best I could come up with was creating multiple tables and using css to give them the appearance of one table...

好吧,我能想到的最好的方法是创建多个表并使用css为它们提供一个表的外观......

Here is the plunker: http://plnkr.co/edit/ZQ1NpOa96IpzSncbFSud?p=preview

以下是plunker:http://plnkr.co/edit/ZQ1NpOa96IpzSncbFSud?p = preview

In your template something like this:

在你的模板中是这样的:

<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>

Then we need to break up your data into chunks and assign them to a "group"... so in the controller we do something like this:

然后我们需要将你的数据分解成块并将它们分配给一个“组”......所以在控制器中我们做这样的事情:

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});
}

This will create tables with 10 rows each (with the last one having the remaining rows), side by side (using the style="float: left")... best I could come up with. Hope it helps!

这将创建每个10行的表(最后一行具有剩余的行),并排(使用style =“float:left”)...最好我能想出来。希望能帮助到你!

#3

Here is an example, which basically involves storing the data as a n x 10 matrix and using nested loops to make the adjustments.

这是一个例子,它基本上涉及将数据存储为n×10矩阵并使用嵌套循环进行调整。

http://jsfiddle.net/gwfPh/15/

Notice, in the controller, the data is stored in the modified form.

请注意,在控制器中,数据以修改的形式存储。

#4

Please see the code below-:

请参阅以下代码 - :

Code-:

<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>

Controller code:

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;
}
}

I have just shown an example to help you implement what you are trying to do.Hope this helps.

我刚刚展示了一个示例来帮助您实现您要执行的操作。希望这会有所帮助。

#5

I would suggest making two tabels, as it looks like what you are really doing. So make a function that gives you elements 1-10 and one that gives you 10 and above, and then just do as you are already doing.

我建议制作两个表格,因为它看起来像你在做什么。因此,创建一个函数,为您提供元素1-10和一个为您提供10及以上的函数,然后就像您已经在做的那样。

Alternatively if you really want them in one table, you could make an array that contains an array of elements for each row - so elements that are the samen when element % 10. Eg something like.

或者,如果你真的想要它们在一个表中,你可以创建一个包含每行元素数组的数组 - 所以元素在元素%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;
}

And then you just have a nested ng-repeat within the ng-repeat and render them.

然后你只需要在ng-repeat中嵌套ng-repeat并渲染它们。

Update: something like this

更新:这样的事情

It could be something like

它可能是这样的

<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>

#1