Question

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

示例：

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

在大多数情况下，我们每行都有一个Icon，它允许我们在它下面添加一行。但是用户将无法在标题下方添加行。

我发现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添加了一个类，只是为了能够将它放在表流之外......）

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

1 个答案: