AngularJS - 创建和检索动态创建的表单

Question

我有一个包含“属性”部分的表单。用户可以根据需要添加任意数量的属性：

HTML：

<h4>
   Attributes:
   <input type="button" value="+" id="new_obj_att_add" ng-click="addNewChoice()">
</h4>
<div class="form-group" ng-repeat="attribute in attributes">
    <input type="text" ng-model="att_name" placeholder="Attribute Name">
    <input type="text" ng-model="att_value" placeholder="Attribute Value">
    <hr>
</div>

JS：

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

现在，该代码非常适合动态增长表单。但是，我需要将表单数据传回我的控制器。如您所见，每个属性都将具有相同的 ng-model，因此我无法从那里获取它。

1) 有没有办法使用每个属性的 ID（即 attr_name_1、attr_name_2）动态分配 ng-model 名称，然后在我的 AngularJS 公式中循环遍历这些元素并以这种方式收集值？

2) 如果我要在 AngularJS 中再次引用这些元素，我是否只是没有以正确的方式创建这些元素？

提前感谢您提供的任何帮助！

Answer 1

您只需将其分配给ng-repeat 中的模型：

<div class="form-group" ng-repeat="attribute in attributes">
    <input type="text" ng-model="attribute.att_name" placeholder="Attribute Name">
    <input type="text" ng-model="attribute.att_value" placeholder="Attribute Value">
    <hr>
</div>

然后这些值会自动分配给 attributes 集合中的正确模型。