將HTML插入到AngularJS ng-repeat表中

我試圖在ng-repeat生成的行的下面插入一個表格作爲新行。我可以使用.splice()成功向數據模型添加一行，但插入時無法呈現HTML。我已經研究了實現這一點的方法，最常提及的方法涉及$watch和$compile函數。問題是我沒有要插入的原始標籤，因爲這是表格中的新行。將HTML插入到AngularJS ng-repeat表中

背後的想法：我有一個數據表與許多行。該表格代表了員工要完成的「行動」數據。我們正在創建一個Web應用程序，允許他們查看自己的操作並在網頁中更新它們，而不是更新電子表格。

我原本是用jQuery動態地插入一行，但正如我們所知道的那樣 - 它打破了DOM。我試圖採取角度的方法，因爲這是一個角度的應用程序，但我正在努力如何做到這一點。

插入的行是一個窗體，用於選擇所有字段，還有一些額外的窗口未顯示在「視圖」中。理想情況下，當點擊包含他們正在編輯的動作的行末尾的按鈕時，這會向下擴展。完成後，可以單擊一個保存按鈕，刪除/摺疊該行並將更改保存到模型中。然後將此更改發送回API以將更改寫回數據庫。

查看錶的： Table view

窗體視野： Form

基本上，我希望動態插入在表中所示的行之間的形式。如有可能，我必須避免使用jQuery並使用AngularJS。

任何人都有一個巧妙的把戲來完成這個？

代碼（不得不刪除一些東西的隱私）：引擎收錄：jf1mv9WG

乾杯， Tux889

來源

2016-12-01 Tux889

你可以把你的代碼的任何變化，所以我們有東西掉的工作？ – Jeff

*我原本是用jQuery動態插入一行，但正如我們所知道的那樣 - 它打破了DOM *用jQuery動態插入行不應該破壞DOM。 –

爲什麼不直接在ng-repeat中生成表單，然後隱藏或顯示它以響應按鈕？ – DrC

如果我理解您的問題（並假設您使用的是角度1x），也許您可以使用ng-repeat-start和ng-repeat-end爲每個項目呈現兩行;並在第二行將表格放入td[colspan=n]（其中n是表格中的列數）。並使兩行互斥，例如第一行可以有ng-if="!item.showForm"，第二行可以有ng-if="item.showForm"。

看看一個這個例子中，我準備：https://jsfiddle.net/miguelerm/9pus3zoc/

來源

2016-12-01 20:53:17 miguelerm

我忘了提及我使用ng-if來防止DOM中的表單元素不必要的時候。 – miguelerm

這真是太棒了 - 我在我的代碼中實現了這些想法，這正是我期待的！非常感謝，我非常欣賞這些知識！ – Tux889

你可以嘗試使用ngBindHtml directive。

您可以將html綁定到您的表。

來源

2016-12-01 18:54:59

將HTML插入到AngularJS ng-repeat表中

回答

相關問題