How to read table data using angularjs and post with update

Question

I have a form as given below:

<form name="my-test-suite" ng-submit=submit() ng-controller="createTestSuite">
        <div ng-controller="showTests">
            <div class="container">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Select Test</th>
                            <th>Test ID#</th>
                            <th>Description</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="test in testcases">
                            <td>
                            <input ng-model='ctrl.test.selected' type="checkbox" value="">
                            </td>
                            <td ng-model='test.id' >{{ test.id }}</td>
                            <td ng-model='test.resourceId'>{{ test.resourceId }}</td>
                            <td ng-model='test.allGraphs'>{{ test.allGraphs }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div align=center>
            <button class="btn btn-default" type="submit">Submit</button>

            </div>
        </div>
    </form>

and controllers as:

var app = angular.module('myApp', []);
app.controller('showTests', function($scope, $http) {
    $http.get("http://localhost:4567/config-manager/tests").then(
            function(response) {
                $scope.testcases = response.data;
            });
});

app.controller('createTestSuite', ['$scope', function($scope, $http) {

    $scope.submit = function() {
       console.log($scope.test);
    }; 

}]);

It shows the grid properly with showTests but when I want to see the table data using createTestSuite Controller I cant see $scope at all. This is the problem. I want to read entire table data and use with post request. Please help.

One got below json for get request:

[ {
  "id" : 55,
  "allGraphs" : null,
  "resourceId" : "126"
}, {
  "id" : 56,
  "allGraphs" : null,
  "resourceId" : "125"
}, {
  "id" : 58,
  "allGraphs" : null,
  "resourceId" : "140"
} ]

I did console.log($scope.testcases); and getting undefined. What I am missing? — Jagdeep
– Jagdeep, Commented Jan 25, 2016 at 12:07

Arminmsg · Accepted Answer · 2016-01-25 15:17:17Z

1

You're using ng-repeat="test in testcases" but you're never defining $scope.test so you're not able to access it. A quick way to pass your table data from the showTests to the createTestSuite controller through ng-click="submit(testcases).

Following changes would be needed:

Update the view:

<form name="my-test-suite" ng-controller="createTestSuite">
    // Other things stay the same
    <button class="btn btn-default" ng-click="submit(testcases)" type="submit">Submit</button>
</form>

Update controller:

app.controller('createTestSuite', ['$scope', function($scope, $http) {

    $scope.submit = function(data) {
       console.log(data);
       // Filter through the selected items if needed
    }; 

}]);

edited Jan 25, 2016 at 15:17

answered Jan 25, 2016 at 12:12

Arminmsg

6216 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jagdeep Over a year ago

Thanks it works :) Now I have to convert that into JSON and post it to diff. URL.

Jagdeep Over a year ago

worked like a charm :) app.controller('createTestSuite', ['$scope', function($scope, $http) { var updatedSuite; $scope.submit = function(data) { updatedSuite = angular.toJson(data); console.log(updatedSuite); }; }]);

Collectives™ on Stack Overflow

How to read table data using angularjs and post with update

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related