Angularjs ng-repeat creating multiple forms

问题:

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

回答1:

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

回答2:

You could also use this, and just add an autoextra attribute to you ng-repeat. New entries will be added on demand.

回答3:

I'm not sure I understand what you want to do correctly either, but it seems there are a few things not quite right here:

1. You are never adding cont.cat or cont.loc at any point, even when you initialize $scope.contacts, so the ng-models won't be bound to anything.
2. In order to add the fields to the specific row that you click the add button on, you need to merge the new fields/properties into the existing index of the $scope.contacts array and also use ng-if to add the input fields to the DOM

What about something like this?

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

And the controller's 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);
            };
        });

Here is the updated Fiddle: http://jsfiddle.net/j32SL/1/

回答4:

Well imagine this as if you just copied and pasted your form over and over each time into the HTML. The model names don't change, and you're referring to the first element each and every time. You need to use $index to bind the correct form with its corresponding index either in your array or json.