How shuold i post multiple table rows with angular

Question

I am trying to post multiple rows data in a single post. Firstly I am fetching all the data and displaying it to the screen. Now at the end of the page there is a submit button where I need to post this data to server(Spring MVC controller) and where I need filter it based on some condition. The problem i am facing is how should i post this whole retrieved data to server as I am unable to get data in $scope.resendIntitate function.Please guide me. Thanks in advance

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

        };
    }]);;

The problem is I am not getting the data in the $scope.resendIntitate function — user1111880, Jan 07 '16 at 10:19

score 1 · Answer 1 · answered Jan 07 '16 at 10:14

1

I assume you have the data that you want to send to server in your $scope.resendIntitate function as data (by the way your alert should be alert(data) not alert($scope.data)). I understand that you are asking how to send an object to server with $http service;

$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");});

You can use Jackson to convert this json in your http request to Java object expected as parameter automatically.

answered Jan 07 '16 at 10:14

ibrahimb

170
1
10

The problem is I am not getting the data in the $scope.resendIntitate function and how do i get it – user1111880 Jan 07 '16 at 10:18
Okey than I misunderstood. Sorry. If that is the case than the problem should be about dir-paginate directive. The directive should protect the referances of names if you cannot access $scope.names in your resendIntitate function. – ibrahimb Jan 07 '16 at 10:34
The earlier function which i copeid above toBeInitiatedOnLoad () I am able to retrieved data and now I need to send same data in resendIntitate(). Can you tell me in js how do i get that referrence in the function resendIntitate(). – user1111880 Jan 07 '16 at 10:37
I am not sure but this may help http://stackoverflow.com/questions/29837842/dir-pagination-directive-angularjs-is-there-any-way-i-can-get-all-the-records – ibrahimb Jan 07 '16 at 10:40
sure... I appretiate if u do same :) – ibrahimb Jan 11 '16 at 11:24

score 1 · Accepted Answer · edited Jan 14 '16 at 21:58

I got the issue. My Data is not reflected in the resendIntitate() function just because it placed outside the controller in my html file. Just placed it in the ng-controller <div> and called it in resendIntitate() function.

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

        };
    }]);;

How shuold i post multiple table rows with angular

2 Answers2