在嵌套部分中动态添加HTML元素

Question

我正在尝试动态地向我的页面添加一堆HTML元素。

我在页面中有以下部分元素：

  `Company section :` has EIN, Company Name and Delete controls.
  `Control Group section :` Control Group name, Delete group link, one or more company sections, and a Add button. 

页面上按钮的功能：

1. Add Control Group：点击此按钮可添加新的控制组部分，如下图所示。

   

2. Delete Group：点击此按钮会删除相应的控制组部分。

3。     Add：应在相应的控制组中添加与公司部分相关的元素。公司部分如下图所示。



1. Delete：应删除相应控制组中与公司部分相关的元素。

   我将代码放在Plunker

   中

   我在每个控制组中添加和删除公司部分时迷失了方向。此外，代码无法添加多个控制组部分。

Answer 1

我不太确定你希望你的UI如何工作，但我看到的明显问题是你错误地使用了拼接。

我假设您只想在用户单击删除时从数组中删除单个元素。如果是这样，请将splice命令更改为：splice(index, 1)。

我还改变了如何使用$index内的Angular ng-repeat来访问要从数组中删除的特定元素的方式。例如，我已将removeControlGroup()函数更改为：

$scope.removeControlGroup = function (index) {
     $scope.ClientGroupsInfo.splice(index, 1);
};

在HTML中，您需要将数组的索引传递给splice，如下所示：

<a ng-click="removeControlGroup($index)"> Delete Group </a>

在HTML中，$index将是从0到数组长度（减1）的数值，并告诉removeControlGroup函数需要删除数组的索引。以前，删除按钮会删除数组中的最后一项。

Updated plunker