Angularjs Ng-repeat Creating Multiple Forms

Question

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:

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

Solution 2:

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

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

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

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

JavaScript Lib