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

发布时间：2020-12-17 08:32:46 所属栏目：安全来源：网络整理

导读：我坚持这个小任务. 我需要通过单击表单上的“添加”按钮动态生成表单输入字段. 该表单应该创建DB表模式.因此,每个输入字段都是数据库表字段名称. 我可以动态生成字段但是在收集实际数据时遇到问题. form ng-controller="NewTableCtrl" ng-submit="submitTabl

我坚持这个小任务.
我需要通过单击表单上的“添加”按钮动态生成表单输入字段.
该表单应该创建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 …]我是否需要为每个字段生成具有不同范围变量的输入字段？我该怎么做呢？

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

谢谢.

现在你正在迭代$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!