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模型，因此我无法从那里获得它。

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集合中的正确模型。

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

1 个答案: