将 HTML 插入 AngularJS ng-repeat 表答案

【问题标题】：Inserting HTML into an AngularJS ng-repeat table将 HTML 插入 AngularJS ng-repeat 表
【发布时间】：2016-12-02 04:53:17
【问题描述】：

我正在尝试在ng-repeat 生成的行下方插入一个表单作为新行。我可以使用.splice() 成功地将一行添加到数据模型中，但是在插入 HTML 时我无法呈现它。我研究了实现这一点的方法，其中最常提到的方法涉及$watch 和$compile 函数。问题是我没有要插入的原始标签，因为这是表中的全新行。

这背后的想法：我有一个包含很多行的数据表。该表表示有关员工要完成的“行动”的数据。我们正在创建一个网络应用程序，允许他们查看自己的操作并在网页中更新它们，而不是更新电子表格。

我最初是使用 jQuery 动态插入一行，但我们知道 - 它破坏了 DOM。我正在尝试采用有角度的方法，因为这是一个有角度的应用程序，但我正在努力解决如何做到这一点。

插入的行是所有选定字段的表单，以及一些未在“视图”中显示的额外字段。理想情况下，当他们单击包含他们尝试编辑的操作的行末尾的按钮时，这会向下扩展一行。完成后，他们可以单击保存按钮，该按钮删除/折叠行并将更改保存到模型。然后将此更改发送回 API 以将更改写回数据库。

表格视图： Table view

表单视图： Form

基本上，我想在表格中显示的行之间动态插入表单。如果可能，我必须避免使用 jQuery 并使用 AngularJS。

谁有一个巧妙的技巧来完成这个？

代码（必须删除一些隐私的东西）：粘贴箱：jf1mv9WG

干杯， Tux889

【问题讨论】：

您可以对代码进行任何更改，以便我们可以解决一些问题吗？
我最初是用 jQuery 动态插入一行，但我们知道 - 它破坏了 DOM 用 jQuery 动态插入一行不应该破坏 DOM。
为什么不直接在 ng-repeat 中生成表单，然后隐藏或显示它以响应按钮？
@DrC 如果您的列表很长，这不会影响页面的性能吗？似乎它会添加很多额外的 HTML。
虽然它会变大，但会更容易。尝试一下，看看它是否真的会导致问题。浏览器通常会处理疯狂过度构建的 DOM，所以我怀疑它会没事的。更大的问题可能是消化过程。不过我不知道它的性能模型。

标签： javascript html angularjs forms model-view-controller

【解决方案1】：

如果我理解您的问题（假设您使用的是 angular 1x），也许您可以使用 ng-repeat-start 和 ng-repeat-end 为每个项目呈现两行；并在第二行中将表单放在 td[colspan=n] 中（其中 n 是表中的列数）。并使两行互斥，例如第一行可以有ng-if="!item.showForm"，第二行可以有ng-if="item.showForm"。

看看我准备的这个例子：https://jsfiddle.net/miguelerm/9pus3zoc/

【讨论】：

我忘了提到我使用 ng-if 来阻止 DOM 中不必要的表单元素。
这太棒了——我在我的代码中实现了这些想法，这正是我想要做的！非常感谢，我非常感谢您的学习！

【解决方案2】：

您可以尝试使用ngBindHtml directive。

您可以将 html 绑定到您的表格。

【讨论】：