Angularjs ng-repeat 创建多个表单

Question

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

Javascript：

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

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

1. 当我添加到新的字段行时，它实际上会将该行添加到由 ng-repeat 创建的所有表单中。
2. 当我输入字段或插入字段时，它会将文本复制到所有子表单。

请让我知道如何修复它，以便在按下添加按钮时仅创建该特定表单中的行，并且当我在新推送字段的字段中输入文本时，它只会将其绑定到该特定字段而不是全部创建的那些。谢谢

Answer 1

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

这里是一个笨蛋：http://plnkr.co/edit/fETiSYVW7Y5C1yTCwizd?p=preview

所以你需要嵌套中继器：

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

模型看起来像这样：

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

    $scope.forms = [{
      name: "form1",
      contacts:[{ ac: '', auth: '', autname: ''}]
    },{
      name: "form2",
      contacts:[{ ac: '', auth: '', autname: ''}]
    },{
      name: "form3",
      contacts:[{ ac: '', auth: '', autname: ''}]
    }];

    $scope.addFields = function (form) {        
        form.contacts.push({ ac: '', auth: '', autname: '' });
    };

    $scope.submit = function(form){
      console.log(form.contacts);
    };
});

Answer 2

您也可以使用this，只需将autoextra 属性添加到您的ng-repeat。将根据需要添加新条目。

Answer 3

我也不确定我是否理解您想要正确执行的操作，但这里似乎有些地方不太对劲：

1. 您永远不会在任何时候添加cont.cat 或cont.loc，即使您初始化了$scope.contacts，所以ng-models 不会绑定到任何东西。
2. 为了将字段添加到单击添加按钮的特定行，您需要将新字段/属性合并到 $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>

还有控制器的JS：

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

这是更新后的小提琴：http://jsfiddle.net/j32SL/1/

Answer 4

想象一下，就好像您只是一次又一次地将表单复制并粘贴到 HTML 中。模型名称不会更改，并且您每次都指的是第一个元素。您需要使用 $index 将正确的表单与其对应的索引绑定在您的数组或 json 中。