shuold如何用angular发布多个表行

时间:2016-01-07 09:47:06

标签: javascript jquery angularjs angularjs-directive angularjs-scope

我想在一个帖子中发布多行数据。首先,我将获取所有数据并将其显示在屏幕上。现在在页面的末尾有一个提交按钮,我需要将这些数据发布到服务器(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);

        };
    }]);;

2 个答案:

答案 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));

        };
    }]);;