如何在第 N 行后的 angular JS 中的 table 中显式添加行？

Question

如何在 angular js 中创建第 N 行后插入一些自定义行。例如，在清单项目中有 10 个对象，我必须在第六行之后多放两行。

<html>
<table>
  <thead>
    <tr>
      <th>Task</th>
      <th>N/A</th>
      <th>Date Completed</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in checklist">
      <td>{{item.taskName}}</td>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

</html>

Answer 1

参见documentation for splice()。它可以在任何给定索引处添加或删除数组中的项目。您需要符合 arrayOfItems.splice(5, 0, addAfter6thItem)

的内容

Answer 2

使用 ng-repeat 指令的 $index 变量。像：->

<html>
<body>
<table>
  <thead>
    <tr>
      <th>Task</th>
      <th>N/A</th>
      <th>Date Completed</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in checklist" ng-if="$index<=6">
      <td>{{item.taskName}}</td>
      <td>
        <input type="checkbox">
     </td>
     <td>
       <input type="text">
     </td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
   <tr ng-repeat="item in checklist" ng-if="$index>6">
     <td>{{item.taskName}}</td>
     <td>
       <input type="checkbox">
     </td>
     <td>
       <input type="text">
     </td>
   </tr>
  </tbody>
</table>
</body>
</html>

如何在第 N 行后的 angular JS 中的 table 中显式添加行？

How to add row explicitly in a table in angular JS after Nth row?

angularjs

ngtable