Interrompe la riga della tabella dopo un valore utilizzando Angular.js

Question

Ho bisogno di un aiuto. Ho un tavolo e ho bisogno quando il numero di serie sarà sopra lo 10 passerà nuovamente alla colonna successiva il numero seriale inizierà da 11.

Sto spiegando il mio codice qui sotto.

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

In realtà ho bisogno del seguente formato.

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 

nuovatabella:

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

Qui ho bisogno Supponiamo che io sono 100 non del numero di serie data.When attraverserà 10, si sposterà a destra con lo stesso due colonne e sono molto on.I utilizzando Angular.js.

Per favore aiutatemi.

Answer 1

Un altro modo di andare su di esso, che avrebbe funzionato per qualsiasi numero di colonne 1-10 sarebbe quello di fare qualcosa di simile:

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

e quindi utilizzare ng-repeat-start per il rendering.

<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

Suggerirei di creare due tabelle, poiché sembra che si stia davvero facendo. Quindi, fai una funzione che ti dà gli elementi 1-10 e uno che ti dà 10 e sopra, e poi fai semplicemente ciò che stai già facendo.

In alternativa, se li si desidera realmente in una tabella, è possibile creare una matrice che contenga una serie di elementi per ogni riga, quindi elementi che sono il samen quando l'elemento% 10, ad esempio qualcosa di simile.

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

E quindi hai appena una ng-ripetizione nidificata all'interno della ng-repeat e renderle.

Aggiornamento: qualcosa di simile

Potrebbe essere qualcosa come

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

Si prega di vedere il codice sotto-:

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

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

Ho appena mostrato un esempio per aiutarti a implementare ciò che stai cercando di fare. Questo è utile.

Answer 4

Ecco un esempio, che consiste essenzialmente nel memorizzare i dati come matrice n x 10 e utilizzare cicli nidificati per effettuare le regolazioni.

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

comunicazione, nel controllore, i dati vengono memorizzati in forma modificata.

Answer 5

Ok, quindi il meglio che potevo venire con stava creando più tabelle e usare i CSS per dare loro l'aspetto di una tabella ...

Ecco la plunker: http://plnkr.co/edit/ZQ1NpOa96IpzSncbFSud?p=preview

Nella tua qualcosa di modello come questo:

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

Poi abbiamo bisogno di rompere il backup dei dati in blocchi e assegnarle a un "gruppo" ... così nel controller che facciamo Somet Hing come questo:

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

Questo creerà le tabelle con 10 righe ciascuno (con l'ultimo uno che ha le restanti righe), fianco a fianco (usando lo style = "float: left") ... meglio che potessi venire con. Spero che sia d'aiuto!