我如何将表数据作为HttpPost请求与angularjs和JSON
How can I pass table data as a HttpPost request with angularjs and JSON?
嗨,我一直在努力研究如何传递表数据,显然有多行。我有一个困难的时间,因为我不知道如何张贴这样一个表。所以基本上,我正在尝试将雇主注册到系统中,他或她应该通过模态添加他们的资格细节。之后,它们填充的详细信息被保存在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">×</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");
});
相关文章:
- ajax请求的顺序总是不同的
- Meteor如何接收HTTP请求
- 有没有一种方法可以防止img get请求使用css或js发生
- 从ajax请求中获取javascript对象
- JSONP请求返回结果,但也触发error_callback
- 在localhost Dev Box上测试JSONP请求的最佳方式
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- 在openshift node js应用程序中获取请求
- 反应路由器弄乱了请求网址
- 在我的情况下,如何进行http请求
- 使用密码对话框Javascript请求帮助
- servlet中的请求对象,而不是从jsp接收参数值
- 否'访问控制允许来源'标头存在于IISNOde中请求的资源(AngularJS+NodeJs)上
- JavaScript代码未正确检查ajax请求
- 使用JavaScript将HTTPPOST请求连接到onclick
- 如何在客户端请求类似于HTTPPost的请求
- 我如何将表数据作为HttpPost请求与angularjs和JSON
- jQueryDatatables服务器端分页,带有自定义HTTPPOST请求和响应