如何使用 ng-repeat 通过动态生成的输入字段将数据插入数据库?
How to insert data in database by dynamically generated input fields with ng-repeat?
我正在创建一个功能,其中有一个添加 (+) 按钮,它通过 angular ng-repeat 在 html 中添加输入字段。
现在我需要将这些数据保存到我需要帮助的数据库中。
这是我的HTML
---------------- HTML-------------
<!-- Multiple address -->
<table cellpadding="0" cellspacing="0">
<tr>
<th>Address 1</th>
<th>Address 2</th>
<th>Zipcode</th>
<th></th>
</tr>
<tbody ng-repeat="m in multiaddress">
<tr>
<td><input type="text" id="addone_{{$index}}" value="{{m.addone}}" /></td>
<td><input type="text" id="two_{{$index}}" value="{{m.addtwo}}" /></td>
<td><input type="text" id="zipcode_{{$index}}" value="{{m.zipcode}}" /></td>
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="addone_{{$index}}" ng-model="addData.addone" ng-required="true" /></td>
<td><input type="text" ng-model="addData.addtwo"/></td>
<td><input type="text" id="zipcode_{{$index}}" ng-model="addData.zipcode" ng-required="true" /></td>
<td><input type="button" ng-click="Add([$index])" value="Add" /></td>
</tr>
</tfoot>
</table>
------------------------我的控制器---------------- ------
/* For Dynamic address of new subadmin */
$scope.multiaddress = [];
$scope.addData = {};
/* Function to insert multi address input row */
$scope.Add = function(){
validateData();
function validateData(){
var valid;
valid = checkValid();
if(valid == true)
{
var customer = {};
customer.addone = $scope.addData.addone;
customer.addtwo = $scope.addData.addtwo;
customer.zipcode = $scope.addData.zipcode;
$scope.multiaddress.push(customer);
console.log(customer);
/* Clear the TextBoxes. */
$scope.addData.addone = "";
$scope.addData.addtwo = "";
$scope.addData.zipcode = "";
}else{
alert('Please fill details');
return false;
}
function checkValid(){
var valid = true;
if($scope.addData.addone == null || typeof $scope.addData.addone == 'undefined' || $scope.addData.addone == ""){
var valid = false;
}else{
}
if($scope.addData.zipcode == null || typeof $scope.addData.zipcode == 'undefined' || $scope.addData.zipcode == ""){
var valid = false;
}else{
}
return valid;
}
}
};
/* Function to remove multi address input row */
$scope.Remove = function (index) {
var name = $scope.multiaddress[index].addone;
$scope.multiaddress.splice(index, 1);
}
我的添加和删除功能运行良好。现在的问题是我没有得到任何解决方案来将这些数据保存到我的数据库中。为了将此数据发送到数据库,我需要为每个输入分配一个 ng-model。但是我的输入是在 ng-repeat 中动态生成的。
有人可以帮我吗?
--- --- --- --- --- --- 更新 --- --- --- --- ---
首先这是一个初学者的问题。让我清除它的疑虑/问题:
- 如何将 ng-model 添加到动态生成的输入中?
- 如何将此数据发送到后端?
我尝试了一个有效的解决方案 ->>> 我更改了这一行:数据:$scope.subadminData,到这个;数据:{'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData},现在我可以发送了此数据到后端。
欢迎任何其他解决方案。 :) –
不知道你是怎么收不到数据的?
也许您没有将完整的数据发送到后端。
在该行:
data: $scope.subadminData
您似乎正在发送部分数据。
所以换行后:
data: {'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData}
您正在获取全部或更多数据。
你可能也看到了,原来你只发送一个变量,现在你发送多个变量。
我正在创建一个功能,其中有一个添加 (+) 按钮,它通过 angular ng-repeat 在 html 中添加输入字段。 现在我需要将这些数据保存到我需要帮助的数据库中。
这是我的HTML
---------------- HTML-------------
<!-- Multiple address -->
<table cellpadding="0" cellspacing="0">
<tr>
<th>Address 1</th>
<th>Address 2</th>
<th>Zipcode</th>
<th></th>
</tr>
<tbody ng-repeat="m in multiaddress">
<tr>
<td><input type="text" id="addone_{{$index}}" value="{{m.addone}}" /></td>
<td><input type="text" id="two_{{$index}}" value="{{m.addtwo}}" /></td>
<td><input type="text" id="zipcode_{{$index}}" value="{{m.zipcode}}" /></td>
<td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="addone_{{$index}}" ng-model="addData.addone" ng-required="true" /></td>
<td><input type="text" ng-model="addData.addtwo"/></td>
<td><input type="text" id="zipcode_{{$index}}" ng-model="addData.zipcode" ng-required="true" /></td>
<td><input type="button" ng-click="Add([$index])" value="Add" /></td>
</tr>
</tfoot>
</table>
------------------------我的控制器---------------- ------
/* For Dynamic address of new subadmin */
$scope.multiaddress = [];
$scope.addData = {};
/* Function to insert multi address input row */
$scope.Add = function(){
validateData();
function validateData(){
var valid;
valid = checkValid();
if(valid == true)
{
var customer = {};
customer.addone = $scope.addData.addone;
customer.addtwo = $scope.addData.addtwo;
customer.zipcode = $scope.addData.zipcode;
$scope.multiaddress.push(customer);
console.log(customer);
/* Clear the TextBoxes. */
$scope.addData.addone = "";
$scope.addData.addtwo = "";
$scope.addData.zipcode = "";
}else{
alert('Please fill details');
return false;
}
function checkValid(){
var valid = true;
if($scope.addData.addone == null || typeof $scope.addData.addone == 'undefined' || $scope.addData.addone == ""){
var valid = false;
}else{
}
if($scope.addData.zipcode == null || typeof $scope.addData.zipcode == 'undefined' || $scope.addData.zipcode == ""){
var valid = false;
}else{
}
return valid;
}
}
};
/* Function to remove multi address input row */
$scope.Remove = function (index) {
var name = $scope.multiaddress[index].addone;
$scope.multiaddress.splice(index, 1);
}
我的添加和删除功能运行良好。现在的问题是我没有得到任何解决方案来将这些数据保存到我的数据库中。为了将此数据发送到数据库,我需要为每个输入分配一个 ng-model。但是我的输入是在 ng-repeat 中动态生成的。 有人可以帮我吗?
--- --- --- --- --- --- 更新 --- --- --- --- ---
首先这是一个初学者的问题。让我清除它的疑虑/问题:
- 如何将 ng-model 添加到动态生成的输入中?
- 如何将此数据发送到后端?
我尝试了一个有效的解决方案 ->>> 我更改了这一行:数据:$scope.subadminData,到这个;数据:{'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData},现在我可以发送了此数据到后端。
欢迎任何其他解决方案。 :) –
不知道你是怎么收不到数据的? 也许您没有将完整的数据发送到后端。 在该行:
data: $scope.subadminData
您似乎正在发送部分数据。 所以换行后:
data: {'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData}
您正在获取全部或更多数据。 你可能也看到了,原来你只发送一个变量,现在你发送多个变量。