使用 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條數據。 當序列號越過10 ，它會移到右側，兩列相同，依此類推。 我正在使用 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;
}

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

Answer 2

好的，所以我能想到的最好的方法是創建多個表並使用 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"）...我能想到的最好的辦法。 希望能幫助到你！

Answer 3

我建議制作兩個表格，因為它看起來像你真正在做什么。 因此，創建一個函數可以為您提供元素 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-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 4

請看下面的代碼-：

代碼-：

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

這是一個示例，它基本上涉及將數據存儲為nx 10矩陣並使用嵌套循環進行調整。

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

請注意，在控制器中，數據以修改后的形式存儲。