How to insert data in database by dynamically generated input fields with ng-repeat?

Question

I'm creating a functionality in which there is a Add(+) button which adds input fields in the html via angular ng-repeat. Now I need to save this data to the database for which I need help.

This is my 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>

------------------------- My Controller -------------------------

/* 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);
}

My add and remove functionality is working very well. Now the thing is that I'm not getting any solution to save this data to my database. For sending this data to db I need a ng-model assigned to each input. But my input are generated dynamically inside ng-repeat. Can anybody please help me with that?

--- --- --- --- --- --- Update --- --- --- --- --- ---

First of all it was a beginner's question. Let me clear it's doubts / questions :

How to add an ng-model to the dynamically generated input?
How to send this data to the backend?

I tried a solution for this which is working ->>> I changed this line : data: $scope.subadminData, to this ; data: {'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData}, Now I'm able to send this data to backend. any other solution is welcome. :) — rahim.nagori
– rahim.nagori, Commented Sep 29, 2018 at 11:54

Rishabh Dwivedi · Accepted Answer · 2019-01-21 13:43:53Z

1

I don't know how you are not getting the data? Maybe you are not sending the complete data to backend. At the line :

data: $scope.subadminData

It seems you are sending part of your data. So after changing to new lines :

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

You are getting all or more data now. You may also see, firstly you were only sending a variable now you are sending multiple variables.

answered Jan 21, 2019 at 13:43

Rishabh Dwivedi

261 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

rahim.nagori Over a year ago

Thanks at that time I was new to all this things :P . Now I got your point.

rahim.nagori · Accepted Answer · 2018-09-29 11:55:55Z

0

I tried a solution for this which is working ->>> I changed this line : data: $scope.subadminData, to this ; data: {'sub' : $scope.subadminData, 'address1' : $scope.multiaddress, 'address2' : $scope.addData}, Now I'm able to send this data to backend.

Any other solution is welcome. :) –

answered Sep 29, 2018 at 11:55

rahim.nagori

6668 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to insert data in database by dynamically generated input fields with ng-repeat?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related