您好我已经创建了一个表格，我们可以在按钮点击中添加和删除表格行。
现在我想将表数据作为Json对象发送到服务器。任何人都可以通过建议如何将表数据转换为JSON对象的方式来帮助我。 我尝试按以下方式进行，但它没有影响。
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module("createDelivery", []);
app.controller("MyController", ['$scope', '$http', function($scope, $http) {
$scope.deliveryDetails = [
{
'fname1':'Muhammed',
'fname2':'Muhammed',
'fname3':'Muhammed',
'fname4':'Muhammed',
'fname5':'Muhammed',
'fname6':'Muhammed',
'fname7':'Muhammed',
'fname8':'Muhammed'
},
{
'fname1':'Muhammed',
'fname2':'Muhammed',
'fname3':'Muhammed',
'fname4':'Muhammed',
'fname5':'Muhammed',
'fname6':'Muhammed',
'fname7':'Muhammed',
'fname8':'Muhammed'
}];
$scope.addNew = function(cdDetails){
$scope.deliveryDetails.push({
'fname1': "",
'fname2': "",
'fname3': "",
'fname4': "",
'fname5': "",
'fname6': "",
'fname7': "",
'fname8': ""
});
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.deliveryDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.deliveryDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.deliveryDetails, function(cdDetails) {
cdDetails.selected = $scope.selectedAll;
});
};
$scope.getData = function(cdDetails)
{
alert("Check");
var jsonString;
jsonString = angular.toJson(cdDetails);
//JSON.stringify(jsonString);
$http
({
url: "/scheduler/createDelivery",
dataType: 'json',
method: 'POST',
data: jsonString
}).success(function(response) {
alert("success : : "+jsonString);
$scope.value = response;
}).error(function(error) {
alert("error::"+error);
});
//window.location.reload();
//document.write("\nString value "+jsonString);
};
}]);
</script>
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;border-top-left-radius:15px"><label class="col-md-1 control-label" style="width:100%;text-align: center;">PO#</label></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">BOL#</label></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Pick Up Date</label></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Units</label></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Quantity</label></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Weight</label></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Load Type</label></th>
<th style="background-color: #337ab7;color: white;border-right: 1px solid white;padding-bottom:4px;"><label class="col-md-1 control-label" style="width:100%;text-align: center;">Commodity Type</label></th>
<th style="background-color: #337ab7;color: white;padding-bottom:4px;border-top-right-radius:15px"><label class="col-md-1 control-label" style="width:100%;">+/-</label></th>
</tr>
<tr style="background-color: rgba(248, 248, 255, 0.81);" ng-repeat="cdDetails in deliveryDetails">
<td style="border-right: 1px solid white;">
<input type="checkbox" ng-model="cdDetails.selected"/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname1" required/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname2" required/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname3" required/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname4" required/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname5" required/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname6" required/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname7" required/>
</td>
<td style="border-right: 1px solid white;">
<input type="text" ng-model="cdDetails.fname8" required/>
</td>
</tr>
</table>
<div class="form-group">
<input ng-hide="!deliveryDetails.length" type="button" ng-click="remove()" value="Remove">
<input type="submit" value="Add New">
<button type="button" name = "createDelivery"class="col-sm-2 btn btn-primary" style="width:25%" ng-click="getData(cdDetails);">Create Delivery</button>
</div>
</form>
答案 0 :(得分：0)
如果我理解了correclty，$scope.deliveryDetails是代表你的桌子的JavaScript目标。
您可以这样做：
$http({
url: "/scheduler/createDelivery",
dataType: 'json',
method: 'POST',
data: $scope.deliveryDetails
}).success(function(response) {
alert("success : : " + response);
$scope.value = response;
}).error(function(error) {
alert("error::" + error);
});
Angular将在内部调用angular.toJson并将其转换为JSON字符串。