動態創建多個輸入字段。 將它們提交到數組中

Question

我創建了一個jsFiddle： 檢查出來

目前，在創建范圍時，它們不是孤立的。 因此，如果我創建兩個輸入字段並鍵入其中一個輸入字段，則文本在輔助輸入字段中重復。

如何創建多個輸入，單獨填寫並同時提交所有輸入？

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

用於訪問每個屬性的不同屬性的開關。 如果你能做到這一點，或者將屬性設為數組