Angularjs - 在 tr ng-repeat 中添加额外的行答案

【问题标题】：Angularjs - add additional row inside a tr ng-repeatAngularjs - 在 tr ng-repeat 中添加额外的行
【发布时间】：2015-08-06 02:49:54
【问题描述】：

Ng-repeat 出现在表格行中

我的疑问是我们如何实现以下目标：

<tr ng-repeat="x in y">
     Looping here....
 </tr>

现在数据对象在<tr> 上循环。我有一个场景，我必须在两个 <tr> 中显示 1 行的数据。

例如。

表格

数据1 数据1.2 数据1.3 数据1.4
Data2 data2.2
Data2b data2.3 data2.4
Data3 data3.2 data3.3 data3.4
Data4 data4.2 data4.3

即两列显示1行数据

不能使用 ng-repeat-end

【问题讨论】：

为什么不能使用ng-repeat-end？
Ng-repeat-end 已被使用。需要在里面显示 2 tr。
我不认为这是使用另一个ng-repeat-end 的问题。在任何情况下，显示更多您的代码以及其他 ng-repeat-start/ng-repeat-end 的使用位置 - 如果这确实是一个问题

标签： angularjs ng-repeat

【解决方案1】：

1) 您可以将ng-if 与ng-repeat 结合使用，2) ng-repeat 支持与ng-repeat-start 和ng-repeat-end 的多元素：

<tr ng-repeat-start="item in [1, 2, 3, 4, 5, 6]">
  <td>{{item}}</td><td>something else</td>
</tr>
<tr ng-if="item % 2 === 0" ng-repeat-end>
  <td colspan="2">-even</td>
</tr>

Demo

【讨论】：

在我的情况下，我必须在 ng-repeat 中包含额外的这工作 gr8 ！

【解决方案2】：

你需要重复 tbody 而不是 tr。

<tbody ng-repeat="x in y" >
  <tr>
    <td>{{X. row data}}</td>
    <td>{{X. row data 2}}</td>
  </tr>
  <tr>
    <td colspan="2">
      {{X. secondRowData}}
    </td>
  </tr>
</tbody>

【讨论】：

已经使用了 ng-repeat-start 和 ng-repeat-end。必须在 2 中显示的数据存在于 ng-repeat-end 中。现在我想在 ng-repeat-end 内的 2 中显示数据以进行单次迭代。
有效，但可能不是最佳解决方案 - 我相信 this 是正确的做法

【解决方案3】：

<tr ng-repeat-start=x in y>
  <td>selectbox here
<tr\>

<tr ng-repeat-end ng-if=somecondition>
  <td>label data <\td>
<\tr>

所以现在我们已经使用了 ng-repeat-end。在 ng-repeat-end 内部，我必须为单次迭代显示 2 行。

<tr><td indexis1>selectbox<\td><\tr>
 <tr><td indexis2>label primary<\td><\tr>
<tr><td indexis2>label secondary<\td><\tr>

这是一个粗略的代码 sn-p，代码中已经存在许多 td。

【讨论】：

【解决方案4】：

我修改了为我的目的提供的解决方案New Dev，并认为我会分享，因为它真的救了我。

我需要一个解决方案，在每 n 行之后重复我的表格标题行，以替代“滚动时冻结/固定”标题行，这对我的用例来说是不可行的.

在此示例中，我在每 25 行之后显示标题行，但如果它将是表中的最后一行，则不显示：(($index+1) != itemCollection.length)。

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Column Header 1 - Value</th>
      <th>Column Header 2 - Index</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat-start="item in itemCollection">
      <td>{{item}}</td>
      <td>{{$index}}</td>
    </tr>
    <tr ng-repeat-end="" ng-if="(($index+1) % 25 === 0) && ($index+1) != itemCollection.length">
      <th>Column Header 1 - Value</th>
      <th>Column Header 2 - Index</th>
    </tr>
  </tbody>
</table>

查看修改后的demo。为简单起见，我使用了内联集合，因此不包括“如果它将成为表中的最后一行则不”逻辑（正如您将在最底部看到不需要的列标题），但是您获取图片。

【讨论】：