As a newcomer to Angular, I am facing an issue in my application where nested ng-repeat is causing problems when submitting the form to hit the rest API using $http. When normal data is submitted, it works fine but not with nested ng-repeat fields upon clicking the save button. Below is the code snippet with more details. The entire data should be displayed in the console. I suspect there might be a mistake somewhere. Your help would be greatly appreciated.
JS Code:
$scope.saveVenFormData = function(vendet){
console.log($scope.vendet);
$scope.venFullAddress.push({
'vendorName': $scope.name,
'panNum': $scope.panNum,
'personName': $scope.venBusDetails.personName,
'mobileNum': $scope.venBusDetails.mobileNum,
'workNum': $scope.workNum,
'emailid': $scope.emailid,
'addressLine1': $scope.addressLine1,
'addressLine2': $scope.addressLine2,
'city': $scope.city,
'state': $scope.state
});
var dataObj = $scope.venFullAddress;
$http.get('/showVendors').success(function(data){
console.log(angular.toJson(data));
});
var res = $http.post('http://localhost:8080/dman/mm', dataObj);
res.success(function(data, status, headers, config) {
$scope.message = data;
});
res.error(function(data, status, headers, config) {
alert( "failure message: " + JSON.stringify({data: data}));
});
};
JSON Structure:
{
"vendor": {
"vendorName": "",
"panNum": "",
"venBusDetails": [{
"personName": "",
"mobileNum": "",
"workNum": "",
"emailid": "",
"venContDetails": [{
"addressLine1": "",
"addressLine2": "",
"city": "",
"state": ""
}]
}]
}
}
Link to Plunker for reference. To simplify things, I have provided a json structure above. My goal is to retrieve all the data from the form and send it to the rest API. Kindly check the link provided. Thank you.