在ng-repeat元素内的新行中显示tr的最后一个td

我发现了很多类似的问题，但不幸的是他们都没有为我做这项工作，我想知道如何才能最后移动ng-tbody内的t-repeat到下一行？请考虑我的CSS技能绝对为零。在ng-repeat元素内的新行中显示tr的最后一个td

     <table> 
         <thead> 
          <tr> 
           <th>Column1</th> 
           <th>Column2</th> 
           <th>Column3</th> 
           <th>Column4</th> 
           <th>Column5</th> 
          </tr> 
         </thead> 
         <tbody ng-repeat="items in ItemsList"> 
          <tr ng-repeat="pItem in items.Items"> 
           <td>{{pItem.Item1}}</td> 
           <td>{{pItem.Item2 }}</td> 
           <td>{{pItem.Items3 }}</td> 
           <td>{{pItem.Item4 }}</td> 
           <td>{{pItem.Item5 }}</td> 
           <td>{{pItem.Item6 }}</td> 
          </tr> 
         </tbody> 
        </table>

pItem.Item6是，我想移动到下一行的列（行只有一个列跨越到完整的行大小）。

我要项6是在下一行如下。

来源

2016-07-22 Learning Curve

好。你的问题对我来说不是很清楚。你能画画并放在这里吗？但是如果你想特别选择最后一个td并执行某些操作，请在ng-repeat中使用$ last .https：//docs.angularjs.org/api/ng/directive/ngRepeat –

我已经用我输出的输出修改了我的问题我想得到的时刻和结果。 –

你为什么在''记录中使用'ng-repeat'？你只能在''中使用它。另外，请看'ng-if =“$ last”'。它允许你在最后一次重复ng-repeat时设置不同的行为（如改变表记录的布局）。 – FDavidov

可能是你想要这个

<table> 
 
    <tbody ng-repeat="items in ItemsList"> 
 
     <tr ng-repeat="pItem in items.Items"> 
 
      <td> 
 
       <table> 
 
        <thead ng-if="$first && $parent.$first"> 
 
         <tr> 
 
          <th>Column1</th> 
 
          <th>Column2</th> 
 
          <th>Column3</th> 
 
          <th>Column4</th> 
 
          <th>Column5</th> 
 
         </tr> 
 
        </thead> 
 
        <tr> 
 
         <td>{{pItem.Item1}}</td> 
 
         <td>{{pItem.Item2 }}</td> 
 
         <td>{{pItem.Item3 }}</td> 
 
         <td>{{pItem.Item4 }}</td> 
 
         <td>{{pItem.Item5 }}</td> 
 
        </tr> 
 
        <tr> 
 
         <td colspan="5">{{pItem.Item6 }}</td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

来源

2016-07-22 11:09:55

Tajkia，只要只有一行，但对于多行，它会在表格末尾创建Item6行，这是不正确的。 –

你说得对。我编辑了我的帖子，在外表的'tr'里面添加一个'table'以连续打印这些列。你现在可以测试它吗？ –

它现在正在创建第一列中的所有单元格 –

<table> 
    <tbody ng-repeat="items in ItemsList"> 
     <tr ng-repeat="pItem in items.Items"> 
      <td> 
       <table> 
        <thead> 
         <tr> 
          <th>Column1</th> 
          <th>Column2</th> 
          <th>Column3</th> 
          <th>Column4</th> 
          <th>Column5</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>{{pItem.Item1}}</td> 
          <td>{{pItem.Item2 }}</td> 
          <td>{{pItem.Items3 }}</td> 
          <td>{{pItem.Item4 }}</td> 
          <td>{{pItem.Item5 }}</td> 
         </tr> 
         <tr> 
          <td colspan="5">{{pItem.Item6 }}</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

上面我已经从外部表的THEAD到内表的TBODY，现在是工作，但头有开始出现在现在的每一行

来源

2016-07-22 11:45:14

在你的解决方案中，'thead'将在每个'tr'元素之前重复。我不认为要这样。我编辑了我的答案，只打印一次'thead'。你可以请检查一下是否有效。 –

您可以处理cont中的数据滚筒使数据结构成为平面阵列。

控制器内部：

$scope.rows = []; 

angular.forEach($scope.ItemsList, function(items){ 
    angular.forEach(items.Items, function(pItem){ 
     $scope.rows.push(pItem); 
    }); 
});

而对于这个数据结构中的HTML是：

<table> 
    <thead> 
     <tr> 
      <th>Column1</th> 
      <th>Column2</th> 
      <th>Column3</th> 
      <th>Column4</th> 
      <th>Column5</th> 
     </tr> 
    </thead> 
    <tbody ng-repeat="row in rows"> 
     <tr> 
      <td>{{row.Item1}}</td> 
      <td>{{row.Item2 }}</td> 
      <td>{{row.Item3 }}</td> 
      <td>{{row.Item4 }}</td> 
      <td>{{row.Item5 }}</td> 
     </tr> 
     <tr> 
      <td colspan="5">{{row.Item6 }}</td> 
     </tr> 
    </tbody> 
</table>

来源

2016-07-22 12:43:22

在ng-repeat元素内的新行中显示tr的最后一个td

回答

相关问题