[英]“Submit is not a function” error in Firefox in dynamically CREATED form without other submit inputs
[英]submit AngularJS form with many dynamically created inputs
我在JSON数组中为每个对象生成一组三个输入。 这是一个简单的模型,显示了我如何对两个对象执行此操作。 我似乎无法弄清楚如何获取所有输入并以“ AngularJS方式”提交。 请注意,我选择对前两个number
输入使用ng-value
不是ng-model
,因为前两个以非常丑陋的方式与bootstrap冲突。
是否有一些简单的方法可以像获取标准表单一样,仅获取所有输入值并提交它们?
HTML:
<form name="editForm" class="form-horizontal" ng-submit="saveEdit()">
<table class="edit_table table table-striped">
<thead>
<tr>
<th class="action_name_cell">Action</th>
<th class="float_cell">Warning Threshold</th>
<th class="float_cell">Error Threshold</th>
<th class="toggle_cell">Enabled</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in edit_rows()">
<td class="action_name_cell">test</td>
<td class="float_cell">
<div class="form-group">
<div class="col-sm-8">
<input type="number" class="form-control" name="{{row.threshold_id}}_warningDecimal"
placeholder="10.0" ng-value="row.warning"
ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
step="0.1" required />
</div>
</div>
</td>
<td class="float_cell">
<div class="form-group">
<div class="col-sm-8">
<input type="number" class="form-control" name="{{row.threshold_id}}_errorDecimal"
placeholder="10.0" ng-value="row.error"
ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"
step="0.1" required />
</div>
</div>
</td>
<td class="toggle_cell">
<label></label><input name="{{row.threshold_id}}_enabled" type="checkbox" ng-checked="row.enabled" data-toggle="toggle">
</td>
</tr>
</tbody>
</table>
<div class="base_button_wrapper">
<button type="submit" class="btn btn-success">Save</button>
<button ng-click="cancelEdit()" type="button" class="btn btn-default">Cancel</button>
</div>
</form>
JS:
angular.module('rtmApp')
.controller('EditCtrl', ['$scope', '$location', '$window', '$timeout',
function ($scope, $location) {
// Change views and show the main view
$scope.cancelEdit = function() {
$location.path('/');
};
// Save, confirm success, then show the main again
$scope.saveEdit = function() {
console.log('Here is the data we are saving...');
// Let's see if we can see the data we are saving/submitting here:
console.log("? How do I get all the data ?");
$location.path('/');
};
var dummyEditJSON = [{
"threshold_id": 1,
"action_id": 1,
"action_name": "fast_preview",
"site_id": 1,
"site_name": "test_site",
"warning": 3.5,
"error": 5.0,
"enabled": true
},
{
"threshold_id": 2,
"action_id": 2,
"action_name": "bill_cgi",
"site_id": 1,
"site_name": "test_site",
"warning": 2.6,
"error": 4.2,
"enabled": false
}
];
$scope.edit_rows = function() {
return dummyEditJSON;
};
}]);
您的输入必须绑定到对象。 您可以使用ng-model指令执行此操作。 看一下这个例子: http : //jsfiddle.net/krvom1ja/
$scope.data = {
a: 'a',
b: [{
v: 'b'
}, {
v: 'c'
}]
}
假设这是您的表单数据,则将其全部保存在同一位置。 然后,当您提交表单时,您只需获取$ scope.data。
另外,您的输入数组是一个实际的数组(请参见键b
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.