Dynamically create muliple input fields. Submit them into an array

Question

I've created a jsFiddle: check it out

Currently, when creating the scopes they are not isolated. Therefore, if i create two input fields and type in one of them the text is duplicated in the secondary inputfield.

How can I create multiple inputs, fill them out individually and submit them all at the same time?

html

<div ng-app="miniapp" ng-controller="MainCtrl">
     <a href="" data-clicker>add inputs</a>
    <form ng-model="project" ng-submit="addPage()">
        <div class="sections"></div>  

        <input type="submit" value="submit"/>
    </form>

    <hr>
    <hr>
    <p>project: {{project.name | json}}</p> 
    <p>output: {{output | json}}</p> 
</div>

JS

var $scope;
var app = angular.module('miniapp', []);

app.directive('clicker', function($compile) {
    'use strict';

    return {
        compile: function(tElement, tAttrs) {
            //var t = '<div data-pop>Pop</div>';
            var t = '<div><input type="text" ng-model="project.name"></div>';

            return function(scope, iElement) {
                iElement.click(function() {
                    $('.sections').append($compile(t)(scope));
                });
            };
        }
    }
});



app.controller('MainCtrl', function($scope) {
    $scope.project = {"name":"sup"};
    $scope.output = [];
   $scope.addPage = function() {
     $scope.output.push(_.clone($scope.project));
   };


}); 

I feel like I've tried everything... Is it just a flaw in my logic? If so, can you show me an example that works according to the user flow below?

User Flow

Answer 1

You should use Angular's ng-repeat directive to iterate through an array of objects and generate the input fields with data-binding.

Here is a simplified version of your code using the directive: http://jsfiddle.net/89AYX/42/

With ng-repeat, everything within the block becomes a template that get compiled automatically for each iteration of an array model. Think of it like a for-each loop in HTML that updates itself when the array changes.

<div ng-repeat="project in projects">
    <input type="text" ng-model="project.name"/>
</div>

As you can see, the project variable becomes accessible within the block as a reference to an object in the array. You can then use that reference to create a two-way binding on the input field with a property of that particular object.

Angular comes with a lot of useful built-in directives that solves a lot of common issues involving data-binding. Be sure to check out their API reference to see what's available.

Answer 2

whenever you create a new input you are attaching the same model property to it project.name

var t = '<div><input type="text" ng-model="project.name"></div>';

switch that access a different attribute for each. or make an attribute an array if you can do that