您好我只是AngularJs和Spring mvc的初学者，我想将AngularJs模型中的表值发送到spring控制器（在table_database的模型中），所以在使用提交按钮后我可以得到像this one
这样的对象但是控制器的方法不起作用，所以我的代码就像这样;
@RequestMapping(value = { "/SAO" }, method = RequestMethod.POST)
public DProjetEtape NouveauEtapesProjet(@RequestBody DProjetEtape DProjetEtape) {
DProjetEtapeService.saveProjet(DProjetEtape);
System.out.println("DProjetEtape "+ DProjetEtape);
return DProjetEtape;
}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Création d'un projet</title>
<link href="<c:url value='/static/css/bootstrap.css' />" rel="stylesheet"></link>
<link rel="stylesheet" href="<c:url value='/static/css/ol.css' />" type="text/css"></link>
<script type="text/javascript" src="<c:url value='/static/js/ol.js' />"></script>
<script type="text/javascript" src="<c:url value='/static/js/OpenLayers.js' />"></script>
<script type="text/javascript" src="<c:url value='/static/js/AngularJS1.2.js' />"></script>
<script type="text/javascript" src="<c:url value='/static/js/jquery.min.js' />"></script>
</head>
<style type="text/css">
body { background-color:powderblue; }
</style>
<body>
<div class="panel-body">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Phases/étapes du projet</legend>
<form data-ng-submit="submit()" name="myForm" data-ng-app="DProjetEtape" data-ng-controller="Controller_DProjetEtape">
<div class="row" >
<ng-form>
<div class="col-md-4">
<div class="form-group">
<label>Nom</label>
<input type="text" class="form-control" placeholder="Nom" data-data-ng-model="DProjetEtape.ordretap" >
</div>
<div class="form-group">
<label>Date de publication AO</label>
<input type="date" class="form-control" placeholder="Date de publication AO" data-ng-model="DProjetEtape.datpubao" >
</div>
<div class="form-group">
<label>Date Ouverture des plis</label>
<input type="date" class="form-control" placeholder="Date Ouverture des plis" data-ng-model="DProjetEtape.datouvpl" >
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Durée estimative</label>
<input type="number" class="form-control" placeholder="Durée estimative" data-ng-model="DProjetEtape.duree" >
</div>
<div class="form-group">
<label>Part de la phase</label>
<input type="text" class="form-control" placeholder="part de la phase" data-ng-model="DProjetEtape.partetap" >
</div>
<label>Ordre obligatoire</label>
<div class="form-group">
<input type="radio" name="gender" value="ldf"> Oui
<input type="radio" name="gender" value="lpr"> Non
</div>
</div>
<div class="col-md-4">
<label> Ordre de la phase : </label>
<input type="text" class="form-control" placeholder="Ordre de la phase" data-ng-model="DProjetEtape.ordretap" >
<div class="form-group">
<label>du</label>
<input type="date" class="form-control" data-ng-model="DProjetEtape.datedebu" >
<label>au</label>
<input type="date" class="form-control" data-ng-model="DProjetEtape.dateFin" >
</div>
<Label>Budget estimatif de la phase :</label>
<div class="form-group">
<input type="number" class="form-control" placeholder="Budget estimatif de la phase" data-ng-model="DProjetEtape.montesti" >
</div>
<div class="clearfix">
<button type="button" class="btn btn-primary addnew pull-right" ng-click="addNewproject(DProjetEtape)">Ajouter</button>
</div>
</div>
<br>
</ng-form>
<div class="row" data-ng-hide="!DProjetEtape.length">
<div class="col-md-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" data-ng-model="selectedAll" data-ng-click="checkAll()" /></th>
<th class="text-center">
Ordre
</th>
<th class="text-center">
Phase
</th>
<th class="text-center">
Durée
</th>
<th class="text-center">
Du
</th>
<th class="text-center">
Au
</th>
<th class="text-center">
Estimation
</th>
<th class="text-center">
Date de publication AO
</th>
<th class="text-center">
Date Ouverture des plis
</th>
<th class="text-center">
Taux
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="DProjetEtape in DProjetEtape">
<td><input type="checkbox" data-ng-model="DProjetEtape.selected"/></td>
<td>{{DProjetEtape.ordretap}}</td>
<td>{{DProjetEtape.partetap}}</td>
<td>{{DProjetEtape.duree}}</td>
<td>{{DProjetEtape.datedebu}}</td>
<td>{{DProjetEtape.dateFin}}</td>
<td>{{DProjetEtape.montesti}}</td>
<td>{{DProjetEtape.datpubao}}</td>
<td>{{DProjetEtape.datouvpl}}</td>
<td>{{DProjetEtape.tauxavan}}</td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-danger pull-right" data-ng-click="removeproject()" value="Supprimer">
</div>
</div>
<pre>Form data ={{list}}</pre>
</div>
<button type="submit"> dddd</button>
</form>
</fieldset>
</div>
<script>
var app = angular.module("DProjetEtape", []);
app.controller("Controller_DProjetEtape",[ '$scope', '$http', function($scope, $http) {
$scope.DProjetEtape = [];
$scope.addNewproject = function(DProjetEtape){
$scope.DProjetEtape.push({
'ordretap': DProjetEtape.ordretap,
'partetap': DProjetEtape.partetap,
'duree': DProjetEtape.duree,
'datedebu': DProjetEtape.datedebu,
'dateFin': DProjetEtape.dateFin,
'montesti': DProjetEtape.montesti,
'datpubao': DProjetEtape.datpubao,
'datouvpl': DProjetEtape.datouvpl,
'tauxavan': DProjetEtape.tauxavan
});
};
var formData;
$scope.list = [];
$scope.submit = function() {
formData = {
'ordretap': $scope.DProjetEtape.ordretap,
'partetap': $scope.DProjetEtape.partetap,
'duree': $scope.DProjetEtape.duree,
'datedebu': $scope.DProjetEtape.datedebu,
'dateFin': $scope.DProjetEtape.dateFin,
'montesti': $scope.DProjetEtape.montesti,
'datpubao': $scope.DProjetEtape.datpubao,
'datouvpl': $scope.DProjetEtape.datouvpl,
'tauxavan': $scope.DProjetEtape.tauxavan
};
console.log(formData);
var response = $http.post('/SAO', { DProjetEtape: formData});
response.success(function(data, status, headers, config) {
$scope.list.push(data);
});
response.error(function(data, status, headers, config) {
alert( "Exception details: " + JSON.stringify({data: data}));
});
//Empty list data after process
$scope.list = [];
};
$scope.removeproject = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.DProjetEtape, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.DProjetEtape = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.DProjetEtape, function (DProjetEtape) {
DProjetEtape.selected = $scope.selectedAll;
});
};
}]);
</script>
<br>
</body>
</html>
And in the list he show me after submit button :
Form data =["\r\n\r\n\r\n\r\n\r\n<html>\r\n\r\n<head>\r\n\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\">\r\n\t<title>Création d'un projet</title>\r\n\t<link href=\"/SAO/static/css/bootstrap.css\" rel=\"stylesheet\"></link>\r\n\t<link rel=\"stylesheet\" href=\"/SAO/static/css/ol.css\" type=\"text/css\"></link>\r\n <script type=\"text/javascript\" src=\"/SAO/static/js/ol.js\"></script>\r\n <script type=\"text/javascript\" src=\"/SAO/static/js/OpenLayers.js\"></script>\r\n <script type=\"text/javascript\" src=\"/SAO/static/js/AngularJS1.2.js\"></script>\r\n <script type=\"text/javascript\" src=\"/SAO/static/js/jquery.min.js\"></script>\r\n</head>\r\n<style type=\"text/css\">\r\n body { background-color:powderblue; }\r\n</style>\r\n<body>\r\n<div class=\"panel-body\">\r\n<fieldset class=\"scheduler-border\">\r\n <legend class=\"scheduler-border\">Phases/étapes du projet</legend>\r\n <form data-ng-submit=\"submit()\" name=\"myForm\" data-ng-app=\"DProjetEtape\" data-ng-controller=\"Controller_DProjetEtape\">\r\n<div class=\"row\" >\r\n\t<ng-form>\r\n \r\n\t\t\t\t\t<div class=\"col-md-4\">\r\n \r\n <div class=\"form-group\">\r\n\t\t\t\t\t\t\t<label>Nom</label>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Nom\" data-data-ng-model=\"DProjetEtape.ordretap\" > \r\n </div>\r\n <div class=\"form-group\">\r\n\t\t\t\t\t\t\t<label>Date de publication AO</label>\r\n <input type=\"date\" class=\"form-control\" placeholder=\"Date de publication AO\" data-ng-model=\"DProjetEtape.datpubao\" > \r\n </div>\r\n <div class=\"form-group\">\r\n\t\t\t\t\t\t\t<label>Date Ouverture des plis</label>\r\n <input type=\"date\" class=\"form-control\" placeholder=\"Date Ouverture des plis\" data-ng-model=\"DProjetEtape.datouvpl\" > \r\n </div>\r\n \r\n \r\n </div>\r\n\t\t\t<div class=\"col-md-4\">\r\n \r\n \r\n <div class=\"form-group\">\r\n\t\t\t\t\t\t\t<label>Durée estimative</label>\r\n <input type=\"number\" class=\"form-control\" placeholder=\"Durée estimative\" data-ng-model=\"DProjetEtape.duree\" > \r\n </div>\r\n <div class=\"form-group\">\r\n\t\t\t\t\t\t\t<label>Part de la phase</label>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"part de la phase\" data-ng-model=\"DProjetEtape.partetap\" > \r\n </div>\r\n\t\t\t\t\t\t\t<label>Ordre obligatoire</label>\r\n <div class=\"form-group\">\r\n <input type=\"radio\" name=\"gender\" value=\"ldf\"> Oui\r\n <input type=\"radio\" name=\"gender\" value=\"lpr\"> Non\r\n </div>\r\n \r\n \r\n </div>\r\n\t\t\t<div class=\"col-md-4\">\r\n\t\t\t<label> Ordre de la phase : </label>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Ordre de la phase\" data-ng-model=\"DProjetEtape.ordretap\" > \r\n \r\n <div class=\"form-group\">\r\n\t\t\t\t\t\t\t<label>du</label>\r\n <input type=\"date\" class=\"form-control\" data-ng-model=\"DProjetEtape.datedebu\" > \r\n <label>au</label>\r\n\t\t\t\t\t\t\t\t<input type=\"date\" class=\"form-control\" data-ng-model=\"DProjetEtape.dateFin\" > \t\t\t\t\t\t\t\t\r\n </div>\r\n\t\t\t\t\t\t\t<Label>Budget estimatif de la phase :</label>\r\n <div class=\"form-group\">\r\n <input type=\"number\" class=\"form-control\" placeholder=\"Budget estimatif de la phase\" data-ng-model=\"DProjetEtape.montesti\" > \r\n </div>\r\n <div class=\"clearfix\">\r\n <button type=\"button\" class=\"btn btn-primary addnew pull-right\" ng-click=\"addNewproject(DProjetEtape)\">Ajouter</button>\r\n </div>\r\n </div>\r\n<br> \r\n</ng-form>\r\n <div class=\"row\" data-ng-hide=\"!DProjetEtape.length\">\r\n <div class=\"col-md-12\">\r\n <table class=\"table table-striped table-bordered\">\r\n <thead>\r\n <tr>\r\n <th><input type=\"checkbox\" data-ng-model=\"selectedAll\" data-ng-click=\"checkAll()\" /></th>\r\n <th class=\"text-center\">\r\n\t\t\t\t\t\t\tOrdre\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tPhase\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tDurée\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tDu\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tAu\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tEstimation\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tDate de publication AO\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tDate Ouverture des plis\r\n\t\t\t\t\t\t</th>\r\n\t\t\t\t\t\t<th class=\"text-center\">\r\n\t\t\t\t\t\t\tTaux\r\n\t\t\t\t\t\t</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr data-ng-repeat=\"DProjetEtape in DProjetEtape\">\r\n <td><input type=\"checkbox\" data-ng-model=\"DProjetEtape.selected\"/></td>\r\n <td>{{DProjetEtape.ordretap}}</td>\r\n <td>{{DProjetEtape.partetap}}</td>\r\n <td>{{DProjetEtape.duree}}</td>\r\n\t\t\t\t\t\t\t<td>{{DProjetEtape.datedebu}}</td>\r\n <td>{{DProjetEtape.dateFin}}</td>\r\n <td>{{DProjetEtape.montesti}}</td>\r\n\t\t\t\t\t\t\t<td>{{DProjetEtape.datpubao}}</td>\r\n <td>{{DProjetEtape.datouvpl}}</td>\r\n <td>{{DProjetEtape.tauxavan}}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n <input type=\"button\" class=\"btn btn-danger pull-right\" data-ng-click=\"removeproject()\" value=\"Supprimer\">\r\n </div>\r\n </div>\r\n <pre>Form data ={{list}}</pre>\r\n </div>\r\n <button type=\"submit\"> dddd</button>\r\n </form>\r\n </fieldset>\r\n \r\n\t</div>\r\n\r\n\r\n\r\n<script>\r\nvar app = angular.module(\"DProjetEtape\", []);\r\napp.controller(\"Controller_DProjetEtape\",[ '$scope', '$http', function($scope, $http) {\r\n $scope.DProjetEtape = [];\r\n \r\n $scope.addNewproject = function(DProjetEtape){\r\n $scope.DProjetEtape.push({ \r\n \t'ordretap': DProjetEtape.ordretap,\r\n \t'partetap': DProjetEtape.partetap,\r\n \t'duree': DProjetEtape.duree,\r\n \t'datedebu': DProjetEtape.datedebu,\r\n \t'dateFin': DProjetEtape.dateFin,\r\n \t'montesti': DProjetEtape.montesti,\r\n \t'datpubao': DProjetEtape.datpubao,\r\n \t'datouvpl': DProjetEtape.datouvpl,\r\n \t'tauxavan': DProjetEtape.tauxavan\r\n }); \r\n };\r\n var formData;\r\n $scope.list = [];\r\n $scope.submit = function() {\r\n\r\n \tformData = {\r\n \t\t\t\t\t'ordretap': $scope.DProjetEtape.ordretap,\r\n \t \t'partetap': $scope.DProjetEtape.partetap,\r\n \t \t'duree': $scope.DProjetEtape.duree,\r\n \t \t'datedebu': $scope.DProjetEtape.datedebu,\r\n \t \t'dateFin': $scope.DProjetEtape.dateFin,\r\n \t \t'montesti': $scope.DProjetEtape.montesti,\r\n \t \t'datpubao': $scope.DProjetEtape.datpubao,\r\n \t \t'datouvpl': $scope.DProjetEtape.datouvpl,\r\n \t \t'tauxavan': $scope.DProjetEtape.tauxavan\r\n \t\t\t};\r\n \tconsole.log(formData);\r\n \r\n \t\t\tvar response = $http.post('/SAO', { DProjetEtape: formData});\r\n \t\t\tresponse.success(function(data, status, headers, config) {\r\n \t\t\t\t$scope.list.push(data);\r\n \t\t\t});\r\n \t\t\tresponse.error(function(data, status, headers, config) {\r\n \t\t\t\talert( \"Exception details: \" + JSON.stringify({data: data}));\r\n \t\t\t});\r\n \t\t\t\r\n \t\t\t//Empty list data after process\r\n \t\t\t$scope.list = [];\r\n \t\t\t\r\n \t\t};\r\n \r\n $scope.removeproject = function(){\r\n var newDataList=[];\r\n $scope.selectedAll = false;\r\n angular.forEach($scope.DProjetEtape, function(selected){\r\n if(!selected.selected){\r\n newDataList.push(selected);\r\n }\r\n }); \r\n $scope.DProjetEtape = newDataList;\r\n };\r\n \r\n $scope.checkAll = function () {\r\n if (!$scope.selectedAll) {\r\n $scope.selectedAll = true;\r\n } else {\r\n $scope.selectedAll = false;\r\n }\r\n angular.forEach($scope.DProjetEtape, function (DProjetEtape) {\r\n \tDProjetEtape.selected = $scope.selectedAll;\r\n });\r\n }; \r\n \r\n}]);\r\n</script>\r\n\r\n\r\n<br>\r\n\r\n</body>\r\n\r\n</html>"]
如果你能帮助我，请，