动态创建多个输入字段。将它们提交到数组中

Question

我创建了一个jsFiddle：check it out

目前，在创建范围时，它们不是孤立的。因此，如果我创建两个输入字段并键入其中一个输入字段，则文本将在辅助输入字段中重复。

如何创建多个输入，单独填写并同时提交所有输入？

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


}); 

我觉得我已经尝试过一切......这只是我逻辑上的一个缺陷吗？如果是这样，你能告诉我一个根据下面的用户流程工作的例子吗？

用户流程

Answer 1

您应该使用Angular的ng-repeat指令迭代对象数组并使用数据绑定生成输入字段。

以下是使用指令的简化版代码：http://jsfiddle.net/89AYX/42/

使用ng-repeat，块中的所有内容都将成为一个模板，可以为数组模型的每次迭代自动编译。可以把它想象成HTML中的for-each循环，当数组发生变化时会自动更新。

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

如您所见，project变量在块中可以作为对数组中对象的引用进行访问。然后，您可以使用该引用在输入字段上创建具有该特定对象的属性的双向绑定。

Angular附带了许多有用的内置指令，解决了许多涉及数据绑定的常见问题。请务必查看他们的API参考，以了解可用的内容。

Answer 2

无论何时创建新输入，都要将相同的模型属性附加到project.name

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

切换访问每个属性的不同属性。或者如果你能做到那就把属性作为一个数组