我坚持这个小任务.
我需要通过单击表单上的“添加”按钮动态生成表单输入字段.
该表单应该创建DB表模式.因此,每个输入字段都是数据库表字段名称.
我需要通过单击表单上的“添加”按钮动态生成表单输入字段.
该表单应该创建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(在第一个输入写入它之前它不存在 – 然后它将保存一个字符串变量).
原文链接：https://www.f2er.com/angularjs/141316.html对于这个简单的用例,您可以尝试：
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:'>
