使用Angular.js在某个值后打断表行

另一种方法，适用于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;
}

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

好的，所以我能想到的最好的办法是创建多个表，并使用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>

然后，我们需要将您的数据分成块，并将它们分配给一个"组"。。。所以在控制器中，我们做这样的事情：

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行的表（最后一行有剩余的行），并排（使用style="float:left"）。。。我能想出的最好的办法。希望它能有所帮助！

这里有一个示例，它主要涉及将数据存储为n x 10矩阵，并使用嵌套循环进行调整。

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

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

请参阅下面的代码-：

代码-：

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

我刚刚展示了一个例子来帮助你实现你想要做的事情。希望这能有所帮助。

我建议制作两个选项卡，因为它看起来像是你真正在做的事情。所以，做一个函数，给你1-10个元素，一个给你10个以上元素，然后按照你已经在做的做。

或者，如果你真的想把它们放在一个表中，你可以制作一个数组，为每一行包含一个元素数组——所以当元素%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重复中有一个嵌套的ng重复并渲染它们。

更新：类似的东西

它可能是类似的东西

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