How can I pass table data as a HttpPost request with angularjs and JSON?

Question

Hi I have been trying to work out on how to pass table data which has multiple rows obviously. I'm having a hard time since I haven't any idea how to post such a table. So basically, I 'm trying to register an employer to the system, which he or she should add their qualification details through a modal. After that the details they fill gets saved in the html table(view). Finally after the other details are filled all the details including what's in the table should pass through angular controller via service to the database. Here's my controller.js

This is the function that sends data.

$scope.register = function (isValid) {
    console.log($scope.records);

    if (isValid) {
        var regidetail = {

            fname: $scope.registDetails.fname,
            lname: $scope.registDetails.lname,
            dob: $scope.registDetails.dob,
            nic: $scope.registDetails.nic,
            Gender: $scope.registDetails.Gender,
            email: $scope.registDetails.email,
            tel: $scope.registDetails.tel,
            id: $scope.registDetails.department,
            Designation: $scope.registDetails.Designation,
            doj: $scope.registDetails.doj,
            addr1: $scope.registDetails.addr1,
            addr2: $scope.registDetails.addr2,
            addr3: $scope.registDetails.addr3,
            addr4: $scope.registDetails.addr4,
            qualification_type: $scope.registDetails.qualification_type,
            qualification: $scope.registDetails.qualification,
            inputdesc: $scope.registDetails.inputdesc,
            inputUni: $scope.registDetails.inputUni,
            inputDuration: $scope.registDetails.inputDuration,
            datepickerDOA: $scope.registDetails.datepickerDOA


        };

        console.log(regidetail);
        UserService.Register(regidetail, function (res) {
            EMPID = (res.data);
            console.log(res.data);
        }
    }

}  

This is the html

<div class="form-group">
    <label class="col-lg-2 col-md-3 control-label" for="">Qualifications</label>
    <div class="col-lg-10 col-md-9 ">
        <table id="basic-datatables" name="datatables" class="table table-striped table-bordered table-hover" cellspacing="0" width="100">
            <thead>
                <tr>
                    <th>Qualification Type</th>
                    <th>Qualification level</th>
                    <th>Description</th>
                    <th>Univercity</th>
                    <th>Duration</th>
                    <th>Date of awarded</th>
                    <th>Remove</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="(recordIndex, record) in records" style="text-align:center">
                    <td ng-model="registDetails.qualification_type">{{record.qualification_type}}</td>
                    <td ng-model="registDetails.qualification">{{record.qualification}}</td>
                    <td ng-model="registDetails.inputdesc">{{record.inputdesc}}</td>
                    <td ng-model="registDetails.inputUni">{{record.inputUni}}</td>
                    <td ng-model="registDetails.inputDuration">{{record.inputDuration}}</td>
                    <td ng-model="registDetails.datepickerDOA">{{record.datepickerDOA}}</td>
                    <td><a href="javascript:void(0)" ng-click="removeRow(recordIndex)"><i style="color:crimson" class="fa fa-trash-o"></i></a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-lg-10 col-md-9 col-md-offset-3 col-lg-offset-2">
        <p data-placement="left" data-toggle="tooltip" title="Add a Qualification">
            <button data-toggle="modal" data-target="#addQualificationsModel" class="btn btn-success pull-left" id="btnNewrow" type="button" style="text-align:justify" ng-click="login(frmLogin.$valid)"><span class="fa fa-plus" style="vertical-align:middle; display:inline-block"></span></button>
        </p>
    </div>
    <!--Modal-->
    <div class="modal fade" id="addQualificationsModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Qualification Details</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-lg-2 col-md-3 control-label">Qualification Type</label>
                        <div class="col-lg-10 col-md-9">
                            <div class="radio-custom radio-inline">
                                <input type="radio" ng-model="QualificationDetails.qualification_type" value="Education" name="radio1" id="radio4">
                                <label for="radio4">Educational</label>
                            </div>
                            <div class="radio-custom radio-inline">
                                <input type="radio" ng-model="QualificationDetails.qualification_type" value="Professional" name="radio1" id="radio5">
                                <label for="radio5">professional</label>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="Qulitype">Qualification Level</label>
                        <div class="col-sm-10">

                            <select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type=='prof'" ng-model="QualificationDetails.qualification" class="form-control">
                                <option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputdesc">Description</label>
                        <div class="col-sm-10">
                            <input type="text" ng-model="QualificationDetails.inputdesc" class="form-control" id="inputdesc" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputUni">University</label>
                        <div class="col-sm-10">
                            <input type="text" ng-model="QualificationDetails.inputUni" class="form-control" id="inputUni" placeholder="University" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="inputDuration">duration</label>
                        <div class="col-sm-10">
                            <input type="text" ng-model="QualificationDetails.inputDuration" class="form-control" id="inputDuration" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="datepickerDOA">Date Of Awarded</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input class="form-control datepicker" type="text" ng-model="QualificationDetails.datepickerDOA" id="datepickerDOA">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="btnSave" type="button" ng-click="save(QualificationDetails)" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!--Modal .End-->
</div>

Any help would be appreciated. :)

Answer 1

Do

var regidetail = angular.toJson({

<!-- all the content here -->

};

And then

$http.({
     method : "POST",
     url    : "your API server URL",
     data   : regidetail,
     }).then(function (response){
         //success callback
         alert("hip hip hurray!");
      }, function (response){
         // error callback
         alert("Enter data correctly");
});