Angularjs ng-repeat 创建多个表单 [英] Angularjs ng-repeat creating multiple forms

问题描述

使用 ng-repeat 我正在创建一堆带有值的表单.对于每个表单，还有一个按钮可以将行添加到具有新字段的特定表单中.代码如下

HTML:

<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">提交</button><a href ng-click="addFields()">添加</a></表单>

Javascript:

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

它正在创建所有表单并添加行，但是有两个问题.:

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

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

解决方案

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

这是一个plunker:http://plnkr.co/edit/fETiSYVW7Y5C1yTCwizd?p=preview

所以你需要嵌套的中继器:

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

<button ng-click="submit(form)">提交</button><button ng-click="addFields(form)">添加</button><小时></表单>

模型看起来像这样:

app.controller('MainCtrl', function($scope) {$scope.forms = [{名称:form1"，联系人:[{ ac: '', auth: '', autname: ''}]},{名称:form2"，联系人:[{ ac: '', auth: '', autname: ''}]},{名称:form3"，联系人:[{ ac: '', auth: '', autname: ''}]}];$scope.addFields = 函数(表单){form.contacts.push({ ac: '', auth: '', autname: '' });};$scope.submit = 函数(表单){控制台日志(form.contacts)；};});

Using ng-repeat I am creating bunch of forms with values in it. With each form there is also button to add rows to that particular form with new fields. Code is below

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

It is creating all the forms and the rows are added however there are two problems.:

1. When I add to new row of fields it actually adds the row to all the forms created by ng-repeat.
2. When i type in the field or inserted fields it copys the text to all the sub forms.

Please let me know how i can fix it so that when add button is pressed only row in that particular form is created and when i enter text in the fields of newly pushed fields it only binds it to that particular one not to all the ones created. Thanks

解决方案

Maybe I didn't understand the question right but What I think you need is a model with multiple forms of multiple contacts.

Here is a plunker: http://plnkr.co/edit/fETiSYVW7Y5C1yTCwizd?p=preview

So you need nested repeaters:

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

And the model looks like so:

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

这篇关于Angularjs ng-repeat 创建多个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！