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

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指令遍历对象数组并生成具有数据绑定(bind)的输入字段。

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

有了 ng-repeat， block 中的所有内容都变成了一个模板，可以为数组模型的每次迭代自动编译。可以把它想象成 HTML 中的 for-each 循环，它会在数组更改时自行更新。

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

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

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