Перерыв таблицы строка после некоторого значения с помощью Angular.js

Question

Мне нужна одна помощь. У меня есть одна таблица, и мне нужно, когда серийный номер будет выше 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 не из data.When серийного номера будет пересекать 10, он будет смещаться в правую сторону с той же две колонки и так on.I утра используя Angular.js.

Пожалуйста, помогите мне.

Answer 1

Другой способ идти об этом, что будет работать для любого числа столбцов 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; 
} 

И затем использовать нг-повторить старт для визуализации.

<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

Я предлагаю сделать две таблицы, так как это похоже на то, что вы действительно делаете. Итак, создайте функцию, которая даст вам элементы 1-10 и одну, которая даст вам 10 и выше, а затем сделайте то же, что вы уже делаете.

Альтернативно, если вы действительно хотите их в одной таблице, вы можете создать массив, содержащий массив элементов для каждой строки - так что элементы, которые являются samen, когда элемент% 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> 

Answer 3

Пожалуйста, смотрите код: ценам ниже

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> 

код контроллера:

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

Я только что показал пример, который поможет вам реализовать то, что вы пытаетесь сделать. Надеюсь, это поможет.

Answer 4

Вот пример, который в основном предусматривает хранение данных в виде матрицы n x 10 и использование вложенных циклов для внесения корректировок.

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

Обратите внимание, в контроллере, данные хранятся в модифицированном виде.

Answer 5

ИТАК лучшее, что я мог придумать было создание нескольких таблиц и с помощью 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> 

Затем нам нужно разбить данные на куски и назначить их на «группы» ... так в контроллере мы делаем сома ething так:

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 строк в каждой (с последней, имеющей оставшиеся строки), бок о бок (используя стиль = «плавать: левый») ... лучше я мог придумайте. Надеюсь, поможет!