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

时间:2018-09-29 11:35:29

标签: angularjs angularjs-ng-repeat

我正在创建一个功能,其中有一个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);
}

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

---------更新--- --- --- --- --- 首先,这是一个初学者的问题。让我清除它的疑问/问题: 1.如何在动态生成的输入中添加 ng-model ? 2.如何将这些数据发送到后端?

2 个答案:

答案 0 :(得分:1)

我不知道您如何获取数据? 也许您没有将完整的数据发送到后端。 在此行:

data: $scope.subadminData

似乎您正在发送部分数据。 因此,更改为新行后:

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

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

答案 1 :(得分:0)

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

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