如何通过使用 ng-repeat 动态生成的输入字段在数据库中插入数据？答案

【问题标题】：How to insert data in database by dynamically generated input fields with ng-repeat?如何通过使用 ng-repeat 动态生成的输入字段在数据库中插入数据？
【发布时间】：2019-12-18 14:47:11
【问题描述】：

我正在创建一个功能，其中有一个 Add(+) 按钮，它通过角度 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);
}

我的添加和删除功能运行良好。现在的问题是我没有得到任何解决方案来将这些数据保存到我的数据库中。为了将此数据发送到 db，我需要为每个输入分配一个 ng-model。但是我的输入是在 ng-repeat 中动态生成的。有人可以帮我吗？

--- --- --- --- --- --- 更新 --- --- --- --- --- ---

首先，这是一个初学者的问题。让我澄清一下它的疑虑/问题：

如何将 ng-model 添加到动态生成的输入中？
如何将此数据发送到后端？

【问题讨论】：

我尝试了一个可行的解决方案 ->>> 我将这一行更改为：data: $scope.subadminData, to this ; data: {'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData}，现在我可以将这些数据发送到后端了。欢迎任何其他解决方案。 :)

标签： angularjs angularjs-ng-repeat

【解决方案1】：

我不知道你怎么没有得到数据？也许您没有将完整的数据发送到后端。在行：

data: $scope.subadminData

您似乎正在发送部分数据。所以换行后：

data: {'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData}

您现在正在获取全部或更多数据。您可能还看到，首先您只发送一个变量，现在您发送多个变量。

【讨论】：

感谢当时我是新手 :P 。现在我明白你的意思了。

【解决方案2】：

我为此尝试了一个可行的解决方案 ->>> 我将这一行更改为： data: $scope.subadminData, 到 this ; data: {'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData}，现在我可以将这些数据发送到后端了。

欢迎任何其他解决方案。 :) –

【讨论】：