如何使用angularjs读取表数据并使用更新发布

时间:2016-01-25 11:16:36

标签: angularjs angularjs-scope angularjs-ng-repeat

我的表格如下:

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

和控制器:

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

}]);

它使用showTests正确显示网格,但是当我想使用createTestSuite控制器查看表数据时,我根本看不到$ scope。这就是问题。我想读取整个表数据并使用post请求。请帮忙。

一个人得到了json获取请求:

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

1 个答案:

答案 0 :(得分:1)

您正在使用ng-repeat="test in testcases",但您永远不会定义$scope.test,因此您无法访问它。 通过showTests快速将表格数据从createTestSuite传递到ng-click="submit(testcases)控制器。

需要进行以下更改:

更新视图:

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

更新控制器:

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

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

}]);