我想在一个帖子中发布多行数据。首先,我将获取所有数据并将其显示在屏幕上。现在在页面的末尾有一个提交按钮,我需要将这些数据发布到服务器(Spring MVC控制器),我需要根据某些条件过滤它。我面临的问题是如何将整个检索到的数据发布到服务器,因为我无法在$ scope.resendIntitate函数中获取数据。请指导我。提前致谢
my.html
<div class="col-md-1" > </div>
<div class="col-md-10">
<!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
<!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
<!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
<a href="downloadExcel"<span class="glyphicon glyphicon-share"></span> Export to Excel</a>
<!-- </button> -->
<div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
<table class="table table-hover table-condensed">
<thead>
<tr>
<!-- <th>S.No.</th> -->
<!-- <th>Employee ID</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
Employee ID
<span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Employee Name</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
Employee Name
<span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Requested By</th> -->
<th>
<a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
Requested By
<span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
Requested Date
<span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>Review Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
<!-- <td>{{x.SNo}}</td> -->
<td>{{x.initiatedFor}}</td>
<td>{{x.empName}}</td>
<td>{{x.initiatedBy}}</td>
<td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
<td><button type="button" class="btn btn-link">View {{x.initiatedFor}}</button></td>
<td>
<select name="action" class="selectContainer actionSelect form-control" title="Select 1 action" width="50px">
<option value="resend">Resend</option>
<option value="initiate">Initiate</option>
</select>
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true"></dir-pagination-controls>
</div>
<div>
<button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
</div>
</div>
<div class="col-md-1"> </div>
app.js
(function() {
var app = angular.module('app', ['ui.bootstrap', 'ngFileUpload', 'bootstrap.fileField','angularUtils.directives.dirPagination','ui.router','ngRoute']);
app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
//alert("tobeinitiated");
$scope.toBeInitiatedOnLoad = function(){
$scope.loading = true;
//alert($scope.id);
$http({
url: 'toBeInitiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.loading = false;
//$scope.initiate.push(data);
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.resendIntitate = function(){
$scope.name={};
var index = 0;
$scope.names.forEach(function (name) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
});
var data ={
initiatedFor : $scope.name.initiatedFor
}
alert(data);
};
}]);;
答案 0 :(得分:1)
我假设您要将$ scope.resendIntitate函数中要发送到服务器的数据作为数据(通过警报应该提醒(数据)不警报($ scope.data))。我知道您正在询问如何使用$ http服务将对象发送到服务器;
$http({
url: 'toBeResendOrInitiated',
method: "POST",
headers: {'Content-Type': 'application/json'},
transformRequest: function () {
var formData = new FormData();
formData.append("yourParameterNameInRestMethod", new Blob([angular.toJson(data)], {type: "application/json"}));
return formData;
}}).success(function (data, status, headers, config) {console.log("success");}).error(function (data, status, headers, config) {console.log("failed");});
您可以使用Jackson将您的http请求中的此json转换为预期作为参数的Java对象。
答案 1 :(得分:1)
我遇到了这个问题。我的数据没有反映在resendIntitate()函数中,因为它放在我的html文件中的控制器之外。只需将其放在ng-controller <div>
中并在resendIntitate()函数中调用它。
app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http){
//$scope.initiate=[];
$scope.names=[];
//alert("tobeinitiated");
$scope.toBeInitiatedOnLoad = function(){
$scope.loading = true;
//alert($scope.id);
$http({
url: 'toBeInitiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.resendIntitate = function(){
//$scope.name={};
var index = 0;
$scope.names.forEach(function (name) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
});
/*var data ={
initiatedFor : $scope.name.initiatedFor
}*/
alert(JSON.stringify($scope.names));
//alert(JSON.stringify($scope.initiate));
};
}]);;