在 AngularJS 表格中添加类似于Microsoft Word 表格的行功能

Question

当我们在Microsoft Office单词表的两行之间悬停鼠标时。它显示一个"+"图标，单击它会在该表中插入一个新行。我想在HTML表中使用AngularJS实现相同的功能。

例：

         --------------------
          Row   1 | Value
         -------------------<"+" Icon>
          Row   2 | Value
         --------------------

在大多数情况下，我们每行都有一个图标，使我们能够在其下方添加一行。但是这样用户将无法在标题下方添加行。

我发现Microsoft Word的方式非常用户友好，因此，我有兴趣使用AngularJS在HTML表格中添加该功能。

<table>    
    <tr ng-repeat="step in steps">
               <td>{{ step.name }}</td>
               <td>{{ step.description }}</td>
               <td><button ng-click="addRow($index)">Add</button></td>
   </tr>
</table>
   $scope.addRow = function(index) {
       // Code
           $scope.steps.splice(index+1,1,{  step.name :"" , step.descrption:""})
       //Code 
}

Answer 1

您不能只添加一个标题行和一个带有以下内容的特殊按钮吗？

<thead>
  <tr>
    <td class="add-row"><button ng-click="addRow(-1)">Add</button></td>
  </tr>
</thead>

（我向该 td 添加了一个类，只是为了能够将其定位在表流之外......