Break table row after some value using Angular.js

Question

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 .

Here is my code:

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

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.

Answer 1

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

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.

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

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

Here is the 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!

Answer 3

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.

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.

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.

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>

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

Answer 5

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

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

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