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

Question

我有这个 JSFiddle 代码：

<div ng-app="angularjs-starter" ng-controller="MainCtrl">
   <fieldset  data-ng-repeat="choice in choicesA">
      <input 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>


   <div id="choicesDisplay">
      {{ choicesA }} <br/>
      {{ choicesB }}
   </div>
</div>

JS :

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choicesA = [{id: 'choice1'}, {id: 'choice2'}];

  $scope.choicesB = [];

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

  $scope.removeChoice = function() {
    var lastItem = $scope.choicesA.length-1;
    $scope.choicesA.splice(lastItem);
  };

});

如您所见，我有一个函数 addNewChoice()，它将对象添加到数组 choicesA，然后根据 choicesA 数组上的对象编号添加文本框。

只有当我点击第一个 fieldset 上的 Add fields 按钮时，我才需要将文本框添加到第一个 fieldset，并且我在这些生成的文本框上写入的数据是绑定并添加到 choicesB 数组的单独对象。和所有其他 Add fields 按钮一样（所以每个 Add field 按钮只能将文本框添加到它自己的 fieldset 标签），这也是根据 [=中的对象数量生成的=16=]数组.

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

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

我有一个 Spring REST API 和两个名为 Resource & Action 的 Java 对象（JPA 实体），对象 Resource 包含一个 Actions 列表，Action 包含一个引用到资源。

当我加载一个页面时，我得到了一个 Resource 对象的数组，我已经通过 $http.get() 方法从数据库中保存了 return，名为 choicesA,数组的结构是这样的:

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

我有另一种方法 $http.post() ，它发布一个名为 choicesB 的 Action 对象数组，一个单独的非嵌套数组。数组结构是这样的：

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

所以choicesA数组包含了我用$http.get()得到的Resource个对象，然后我想在[=中填充Action个对象21=] 数组，然后使用 $http.post() 保存数组，每个 Action 应该包含一个 Resource 对象。例如，如果我在第一个 fieldset 标签中单击以添加更多操作，则意味着我要填充 choicesB 数组中的第一个 Action 对象，并将第一个 [=27] 分配给它=] 对象位于 choicesA 数组等..

我希望能够决定动作的数量并填写它们，然后将它们保存到 choicesB 数组中。但是每个动作都与我描述的特定 Resource 对象相关。

我希望现在一切都清楚了，对不起，再次感谢你。

Answer 1

我相信你想要做的是有 2 个嵌套数组。

那么你就会嵌套 ng-repeat。您通过将该数组作为函数的参数传递来跟踪哪个数组

查看

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

JS

$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();
};

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

DEMO

Answer 2

可能我误解了你的问题。也许这将有助于解决您的问题。

jsfiddle.

上的实例

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {

  $scope.choicesA = [{
    id: 'choice1',
    choicesB:[]
  }, {
    id: 'choice2',
    choicesB:[]
  }];


  $scope.addNewChoice = function() {
    var newItemNo = $scope.choicesA.length + 1;
    $scope.choicesA.push({
      'id': 'choice' + newItemNo,
      choicesB:[]
    });
  };

  $scope.removeChoice = function(ind) {
    $scope.choicesA.splice(ind,1);
  };

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

  $scope.removeChoiceB = function(choice,ind) {
    choice.choicesB.splice(ind,1);
  };

});

fieldset {
  background: #FCFCFC;
  padding: 16px;
  border: 1px solid #D5D5D5;
}

.addfields {
  margin: 10px 0;
}

#choicesDisplay {
  padding: 10px;
  background: rgb(227, 250, 227);
  border: 1px solid rgb(171, 239, 171);
  color: rgb(9, 56, 9);
}

.remove {
  background: #C76868;
  color: #FFF;
  font-weight: bold;
  font-size: 21px;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 4px 9px;
  vertical-align: top;
  line-height: 100%;
}

input[type="text"],
select {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <button class="addfields" ng-click="addNewChoice()">Add choice</button>
  <fieldset data-ng-repeat="choice in choicesA">
    <input type="text" ng-model="choice.name" name="" placeholder="Enter name">
    <button class="remove" ng-click="removeChoice($index)">-</button>
    <button class="addfields" ng-click="addNewChoiceB(choice)">Add fields</button>
    <div data-ng-repeat="choiceb in choice.choicesB">
      <input type="text" ng-model="choiceb.name" name="" placeholder="Enter field">
      <button class="remove" ng-click="removeChoiceB(choice,$index)">-</button>
    </div>
  </fieldset>


  <div id="choicesDisplay">
    <pre>choicesA = {{ choicesA }}</pre>
    <pre data-ng-repeat="choiceb in choicesA">choicesB = {{ choiceb.choicesB }}</pre>
  </div>
</div>

已更新

jsfiddle.

上的实例

Answer 3

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

你的要求的第一部分通过将文本框添加到特定的字段集来解决，我不清楚第二个要求用这个

替换你的 html 代码

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

Add buttons dynamically which also add textboxes dynamically AngularJS

javascript

java

data-binding

dynamic-html

angularjs