在AngularJS表中添加類似於Microsoft Word表格的行功能

-1

當我們將鼠標懸停在Microsoft Office單詞表的兩行之間時。它顯示一個「+」圖標，點擊它將在該表中插入一個新行。我想用一個HTML表格來實現與AngularJS相同的功能。在AngularJS表中添加類似於Microsoft Word表格的行功能

例如：

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

來源

2016-06-09 Amit

這是令人難以置信的*** ***廣闊。你有什麼需要我們解決的嗎？你是否爲了這個目標而編寫了任何代碼？ – Makoto

嗨，我添加了一個代碼片段，它顯示了我們的常用功能。 – Amit

這不是很寬泛，功能已經實現了，問題是如何添加頂部添加行的行爲。 – rewritten

難道你不能只是添加一個標題行和一個特殊的按鈕與以下？

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

（我添加了一個類到TD只是爲了能夠將其定位出表流...）

來源

2016-06-09 08:29:22 rewritten

謝謝重寫。你可以請發佈添加行類的代碼。 – Amit

.add-row { position：relative; top：-18px; left：18px; } 這會在右上角添加圖標。 – Amit

在AngularJS表中添加類似於Microsoft Word表格的行功能

回答

相關問題