Split row table after some value with Angular.js

Question

I need one help. I have one table, and I need it, when the serial number is above 10 , it will again switch to the next column ordinal, starting at 11 .

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

New_table:

 <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 have to assume that I have 100 no data. When the serial number crosses 10 , it will shift to the right with the same two columns and so on. I am using Angular.js.

Please help me.

Answer 1

Another way around this, which will work for any number of columns from 1 to 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 think of was to create multiple tables and use css to give them the look of a single table ...

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

Your template has 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 your data into pieces and assign it 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 having the remaining rows), next to each other (using style = "float: left") ... the best I could think of. Hope this helps!

Answer 3

I would suggest creating two tables, as this is similar to what you are really doing. So create a function that will give you elements 1-10 and one that will give you 10 and above, and then just do what you are already doing.

Alternatively, if you really want them in one table, you can create an array containing an array of elements for each row - so that elements that are the samen when element is% 10. For example, 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 only have nested ng-repeat inside ng-repeat and rendering.

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 just showed you an example that will help you realize what you are trying to do. Hope this helps.

Answer 5

Here's an example that basically involves storing data in the form of an nx 10 matrix and using nested loops to make adjustments.

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

Please note that data is stored in a modified form in the controller.