Javascript 动态添加按钮，动态添加文本框

我有以下JSFIDLE代码：

如您所见，我有一个函数

addNewChoice（）

，它将对象添加到数组

choicesA

，然后根据

choicesA

数组上的对象编号添加文本框

只有当我单击第一个

字段集

上的

添加字段

按钮时，我才需要将文本框添加到第一个

字段集

，并且我在这些生成的文本框上写入的数据被绑定并添加到

选项b

数组的单独对象中。所有其他

添加字段

按钮也是如此（因此每个

添加字段

按钮只能将文本框添加到自己的

字段集

标记中），这些文本框也会根据

选项a

数组中的对象数量生成

我什么都试过了，就是想不出来。如果有点不清楚，我可以解释得更多。提前谢谢你

编辑：感谢大家的大力帮助，让我解释一下：

我有一个springrestapi和两个名为Resource&Action的

Java

objects（JPA实体），object资源包含一个操作列表，Action包含对资源的引用

当我加载一个页面时，我从数据库中获取一个已保存的

资源
对象数组，该数组通过一个名为
choicesA
的$http.get（）方法返回，数组结构如下：

[
{"idResource":1, "nameResource": "resName1"},
{"idResource":2, "nameResource": "resName2"}
......etc depends oh how much rows I got from the DB
]

[
{"idAction":1, "nameAction":"nameAction1", "resource": 
   {"idResource":1, "nameResource": "resName1"},
{"idAction":2, "nameAction":"nameAction2", "resource": 
   {"idResource":2, "nameResource": "resName2"},
   ..
}
{...},
{...}
...
]

我有另一个方法，$http.post（），它发布一个名为
choicesB
的
Action
对象数组，一个单独的非嵌套数组。数组结构如下所示：

[
{"idResource":1, "nameResource": "resName1"},
{"idResource":2, "nameResource": "resName2"}
......etc depends oh how much rows I got from the DB
]

[
{"idAction":1, "nameAction":"nameAction1", "resource": 
   {"idResource":1, "nameResource": "resName1"},
{"idAction":2, "nameAction":"nameAction2", "resource": 
   {"idResource":2, "nameResource": "resName2"},
   ..
}
{...},
{...}
...
]

因此
choicesA
数组包含我用$http.get（）得到的
Resource
对象，然后我想在
choicesB
数组中填充
Action
对象，然后使用$http.post（）保存数组，每个
Action
都应该包含一个
Resource
对象。例如，如果我单击在第一个
字段集中添加更多操作，这意味着我要填充
选项B
数组中的第一个
操作
对象，并将
选项A
数组中的第一个
资源
对象分配给它

我希望能够确定操作的数量并填写它们，然后将它们保存到
选项b
数组中。但每个动作都与我描述的特定
资源
对象相关

我希望现在一切都清楚了，我很抱歉&再次感谢您。
我相信您正在尝试的是使用两个嵌套数组

然后您将嵌套
ng repeat
。通过将该数组作为函数的参数传递，可以跟踪哪个数组

看法

注意：您需要稍微修改
ID
系统。通常，这将来自服务器无论如何

我相信您正在尝试的是使用两个嵌套数组

然后您将嵌套
ng repeat
。通过将该数组作为函数的参数传递，可以跟踪哪个数组

看法

注意：您需要稍微修改
ID
系统。通常，这将来自服务器无论如何

可能我误解了你的问题。也许这会帮助你解决问题

现场示范


var-app=angular.module（'angularjs-starter'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.choicesA=[{
id:“choice1”，
选项B:[]
}, {
id:‘选择2’，
选项B:[]
}];
$scope.addNewChoice=函数（）{
var newItemNo=$scope.choicesA.length+1；
$scope.choicesA.push({
“id”：“choice”+newItemNo，
选项B:[]
});
};
$scope.removeChoice=函数（ind）{
$scope.choicesA.拼接（ind，1）；
};
$scope.addNewChoiceB=函数（选项）{
var newItemNo=choice.choicesB.length+1；
选择，选择推({
“id”：“choice”+newItemNo
});
};
$scope.removeChoiceB=函数（选项，ind）{
选择拼接（ind，1）；
};
});
字段集{
背景:#fcfc；
填充：16px；
边框：1px实心#d5d5；
}
addfields先生{
利润率：10px0；
}
#精选展示{
填充：10px；
背景：rgb（227250227）；
边框：1px实心rgb（171239171）；
颜色：rgb（9,56,9）；
}
.移除{
背景：#C76868；
颜色：#FFF；
字体大小：粗体；
字号：21px；
边界：0；
光标：指针；
显示：内联块；
填充：4px9px；
垂直对齐：顶部；
线高：100%；
}
输入[type=“text”]，
挑选{
填充物：5px；
}

增加选择
-
添加字段
-
choicesA={{choicesA}
choicesB={{choiceb.choicesB}
也许我误解了你的问题。也许这会帮助你解决问题

现场示范


var-app=angular.module（'angularjs-starter'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.choicesA=[{
id:“choice1”，
选项B:[]
}, {
id:‘选择2’，
选项B:[]
}];
$scope.addNewChoice=函数（）{
var newItemNo=$scope.choicesA.length+1；
$scope.choicesA.push({
“id”：“choice”+newItemNo，
选项B:[]
});
};
$scope.removeChoice=函数（ind）{
$scope.choicesA.拼接（ind，1）；
};
$scope.addNewChoiceB=函数（选项）{
var newItemNo=choice.choicesB.length+1；
选择，选择推({
“id”：“choice”+newItemNo
});
};
$scope.removeChoiceB=函数（选项，ind）{
选择拼接（ind，1）；
};
});
字段集{
背景:#fcfc；
填充：16px；
边框：1px实心#d5d5；
}
addfields先生{
利润率：10px0；
}
#精选展示{
填充：10px；
背景：rgb（227250227）；
边框：1px实心rgb（171239171）；
颜色：rgb（9,56,9）；
}
.移除{
背景：#C76868；
颜色：#FFF；
字体大小：粗体；
字号：21px；
边界：0；
库索
 <fieldset data-ng-repeat="group in choices">
    <div ng-repeat="choice in group">
      <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
      <button class="addfields" ng-click="addNewChoice(group)">Add fields</button>
      <button class="remove" ng-click="removeChoice(group)">-</button>
    </div>
 </fieldset>

$scope.choices = [
  // first group
  [{id: 'choice1'}, { id: 'choice2'}],
  //second group
  [{}]
];


$scope.addNewChoice = function(group) {
  var newItemNo = group.length + 1;
  group.push({
    'id': 'choice' + newItemNo
  });
};

$scope.removeChoice = function(group) {
  group.pop();
}; 

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset>
<input  data-ng-repeat="choice in choicesA" type="text" ng-model="choice.name" name="" placeholder="Enter name">
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<button class="remove" ng-click="removeChoice()">-</button>
</fieldset>