Javascript Angularjs ng重复创建多个表单

使用ng repeat，我创建了一组带有值的表单。对于每个表单，还有一个按钮，用于向特定表单添加带有新字段的行。代码如下

HTML:

<div ng-repeat="cont in contacts">
    <form ng-submit="newContact()">
        <input type="text" class="xdTextBox" ng-model="cont.ac"/>
        <input type="text" class="xdTextBox" ng-model="cont.cat"/>
        <input type="text" class="xdTextBox" ng-model="cont.loc"/>
        <button type="submit">Submit</button>
        <a href ng-click="addFields()">Add</a>
    </form>
</div>

$scope.contacts = [{ ac: '', auth: '', autname: ''}];
$scope.tasks = [];
$scope.addFields = function () {
    $scope.contacts.push({ ac: '', auth: '', autname: '' });
    console.log($scope.contacts);
}

它正在创建所有表单并添加行，但存在两个问题：

当我添加到字段的新行时，它实际上会将该行添加到由ng repeat创建的所有表单中

当我输入字段或插入的字段时，它会将文本复制到所有子窗体

---

请让我知道我如何修复它，以便当按下add按钮时，只创建该特定表单中的行，当我在新按下的字段中输入文本时，只将其绑定到该特定字段，而不是所有创建的字段。谢谢

也许我没有正确理解这个问题，但我认为您需要的是一个具有多种形式的多联系人的模型

这是一个扑克牌： 因此，您需要嵌套中继器：

<form name="{{form.name}}"
      ng-repeat="form in forms">

  <h2>{{form.name}}</h2>
  <div ng-repeat="cont in form.contacts">
          <input type="text" class="xdTextBox" ng-model="cont.ac"/>
          <input type="text" class="xdTextBox" ng-model="cont.cat"/>
          <input type="text" class="xdTextBox" ng-model="cont.loc"/>

  </div>
  <button ng-click="submit(form)">Submit</button>
  <button ng-click="addFields(form)">Add</button>
  <hr>
</form>

---

我也不确定我是否理解您想要正确地做什么，但似乎有一些事情不太正确：

您从未在任何时候添加

cont.cat

或

cont.loc

，即使在初始化$scope.contacts时也是如此，因此ng型号不会绑定到任何东西

为了将字段添加到单击“添加”按钮的特定行中，需要将新字段/属性合并到$scope.contacts数组的现有索引中，并使用ng if将输入字段添加到DOM中

像这样的怎么样

    <div ng-app="MyApp">
        <div ng-controller="MyCtrl">
            <div ng-repeat="cont in contacts">
                <form ng-submit="newContact()">
                    <input type="text" class="xdTextBox" ng-model="cont.ac"/>
                    <input type="text" class="xdTextBox" ng-model="cont.cat"/>
                    <input type="text" class="xdTextBox" ng-model="cont.loc"/>
                    <input ng-if="cont.auth !== undefined" type="text" class="xdTextBox" ng-model="cont.auth"/>
                    <input ng-if="cont.autname !== undefined" type="text" class="xdTextBox" ng-model="cont.autname"/>
                    <button type="submit">Submit</button>
                    <a href ng-click="addFields($index)">Add</a>
                </form>
            </div>
       </div>
    </div>

---

这是更新后的提琴：

我们可以想象一下，这就像你每次都在HTML中一遍遍地复制和粘贴表单一样。模型名称不变，每次都引用第一个元素。您需要使用$index将正确的表单与其在数组或json中对应的索引绑定

您也可以使用，只需添加一个

autoextra

属性即可。将根据需要添加新条目。

我不确定是否能看到问题-尝试在每个表单中使用不同的ng模型。这是对代码的过度简化吗？如果将同一对象推入

$scope.contacts

，而不是示例中的新对象文本，则这将解释您看到的内容。@RGraham他尝试执行其他操作（仅将行添加到一个表单）@RGraham只需忽略代码并阅读OP的解释：对于每个表单，还有一个按钮，用于向特定表单添加带有新字段的行。这个问题缺少一些细节，比如每个表单应该添加哪些字段？如果您需要同时提交所有表单，是否可以？假设至少有一个表单具有应上载的文件。例如，使用

ng file upload

指令。

    <div ng-app="MyApp">
        <div ng-controller="MyCtrl">
            <div ng-repeat="cont in contacts">
                <form ng-submit="newContact()">
                    <input type="text" class="xdTextBox" ng-model="cont.ac"/>
                    <input type="text" class="xdTextBox" ng-model="cont.cat"/>
                    <input type="text" class="xdTextBox" ng-model="cont.loc"/>
                    <input ng-if="cont.auth !== undefined" type="text" class="xdTextBox" ng-model="cont.auth"/>
                    <input ng-if="cont.autname !== undefined" type="text" class="xdTextBox" ng-model="cont.autname"/>
                    <button type="submit">Submit</button>
                    <a href ng-click="addFields($index)">Add</a>
                </form>
            </div>
       </div>
    </div>

        var myApp = angular.module("MyApp", []);
        myApp.controller("MyCtrl", function($scope) {
            // These were previously { ac: '', auth: '', autname: ''}, which is what it seems you actually want to add after clicking.
            $scope.contacts = [{ ac: '', cat: '', loc: ''},{ ac: '', cat: '', loc: ''}];
            console.log($scope.contacts);
            $scope.tasks = [];
            $scope.addFields = function ($index) {
                $scope.contacts[$index] = angular.extend($scope.contacts[$index], { ac: '', auth: '', autname: '' });
                console.log($scope.contacts);
                console.log($index);
            };
        });