我如何将表数据作为HttpPost请求与angularjs和JSON

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

本文关键字:请求 HttpPost angularjs JSON 数据      更新时间:2023-09-26

嗨,我一直在努力研究如何传递表数据,显然有多行。我有一个困难的时间,因为我不知道如何张贴这样一个表。所以基本上,我正在尝试将雇主注册到系统中,他或她应该通过模态添加他们的资格细节。之后,它们填充的详细信息被保存在html表(视图)中。最后,在填好其他细节之后,所有的细节(包括表中的内容)都应该通过service传递给angular控制器。这是controller.js

这是发送数据的函数。

$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);
        }
    }
}  

这是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>

任何帮助都会很感激。:)

var regidetail = angular.toJson({
<!-- all the content here -->
};

$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");
});