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

Question

我坚持这个小任务.我需要通过单击表单上的"添加"按钮动态生成表单输入字段.该表单应该创建DB表模式.因此,每个输入字段都是数据库表字段名称.

我可以动态生成字段但是在收集实际数据时遇到问题.

<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('NewTableCtrl', function($scope) {
  $scope.fields = [];
  $scope.table = {};

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

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

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

我认为这样的原因是通过普通表单提交的类比,其中重复输入字段名称成为URL编码表单数据中的数组.

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

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

谢谢.

Answer 1

现在你正在迭代$scope.fields.当你添加一个新字段时,你将一个空对象推入$scope.fields,但每个输入的ng模型指向$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