angularjs - 生成动态表单输入字段并在数组中收集字段数据

Question

我被这个小任务困住了。
我需要通过单击表单上的“添加”按钮来动态生成表单输入字段。
该表单应该创建数据库表模式。所以每个输入字段都是一个数据库表字段名称。

我可以动态生成字段，但无法收集实际数据。

<form ng-controller="NewTableCtrl" ng-submit="submitTable()">
  <input type='text' ng-model='table.title' placeholder='Title:'>
  <input ng-repeat="field in fields" type='text' ng-model='table.fields' placeholder='Field:'>
  <div>
    <button type='submit'>Submit</button>
    <button ng-click="addFormField()">Add</button>
  </div>
</form>

..和 Controller

.controller('NewTableCtrl', function($scope) {
  $scope.fields = [];
  $scope.table = {};

  $scope.addFormField = function () {
    $scope.fields.push({});
  }

  $scope.submitTable = function () {
    console.log($scope.table);
  }
});

看起来很简单。当我单击“添加”按钮时，它会生成新的输入字段，但它使用相同的模型对象(显然)。这就是我的误解所在。我想如果我声明 $scope.fields = [];在 Controller 中，重复的字段数据将进入数组。但它只是在每个重复输入字段中回显输入。我现在明白这就是双向绑定(bind)的方式。

我之所以这么想，是因为类似于普通的表单提交，其中重复的输入字段名称变成了 URL 编码表单数据中的一个数组。

那么我该如何解决呢？服务器需要获取如下字段数组:fields: [field1, field2 ...]我是否需要为每个字段生成具有不同范围变量的输入字段？我该怎么做呢？

这比我想象的更复杂吗？它需要一个指令吗？如果是，请告诉我如何做到这一点。

谢谢。

Answer 1

现在你正在迭代 $scope.fields .当您添加一个新字段时，您将一个空对象插入 $scope.fields ，但每个输入的 ng-model 指向 $scope.table.fields (在第一个输入写入它之前它是不存在的 - 然后它将保存一个字符串变量)。

对于这个简单的用例，您可以尝试:

app.controller('NewTableCtrl', function($scope) {

  $scope.table = { fields: [] };

  $scope.addFormField = function() {
    $scope.table.fields.push('');
  }

  $scope.submitTable = function() {
    console.log($scope.table);
  }

});

和:

<input ng-repeat="field in table.fields track by $index" type='text' ng-model='table.fields[$index]' placeholder='Field:'>

演示 : http://plnkr.co/edit/6iZSIBa9S1G95pIMBRBu?p=preview