Question

Ng-repeat存在于表格行

我的查询是如何实现以下目标：

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

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

例如

表

Data1 data1.2 data1.3 data1.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

Answer 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

Answer 2

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

我需要一个解决方案，在每个 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。为了简单起见，我使用了内联集合，因此“不是它将成为表中的最后一行”逻辑不包含在内（正如您将在最底部看到不需要的列标题），但是得到照片。

Answer 3

你需要重复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>

Answer 4

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

这是一个粗略的代码片段，代码中已经存在许多td。

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

4 个答案: