Angularjs NG重复创建多种形式 [英] Angularjs ng-repeat creating multiple forms

问题描述

使用纳克重复我创造一堆形式在它的值。随着每种形式也有按键将行添加到新的领域的具体形式。 code是低于

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. 当我加入到域的新行实际添加行吴重复创建的所有形式。


2. 当我在字段中键入或插入的领域它copys文本到所有的子表单。

请让我知道我可以修复它​​，这样，当添加按钮是在创建pssed只在特定的形式排$ P $，当我在新推字段的字段中输入文字，只将其绑定到特定的一个不是所有的那些创建。谢谢

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.

所以，你需要嵌套的中继器：

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>

和模型看起来像这样：

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重复创建多种形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！