来自 json 的 Angular JS 中的动态 Table

Question

我正在尝试通过接收来自 Spring Rest Service 的响应从 Angular JS 生成动态 table。

这是我的代码：

// JavaScript Document

var app = angular.module("SDLC", []);

app.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.common = 'Content-Type: application/json';
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }]);

var urlBase = "http://localhost:8080";

app.controller('projecttable_controller', function($scope, $http) {
  
  $scope.ordered_columns = [];
  $scope.all_columns = [{
    "title": "Project Name",
    "type": "string"
  }, {
    "title": "Project Description",
    "type": "string"
  }, {
    "title": "Owner",
    "type": "string"
  }, {
    "title": "Start Date",
    "type": "string"
  }, {
    "title": "End Date",
    "type": "string"
  },{
    "title": "Record ID",
    "type": "string"
  }];
  

  $http.get(urlBase+'/hello?input=raina').
     success(function(data) {
  //alert(data); 
  $scope.data=data; 
  alert($scope.data);
  });
  
  
  $scope.$watch('all_columns', function() {
    update_columns();
  }, true);

  var update_columns = function() {
    $scope.ordered_columns = [];
    for (var i = 0; i < $scope.all_columns.length; i++) {
      var column = $scope.all_columns[i];
        $scope.ordered_columns.push(column);
    }
  };
});

<div class="btn-box-row row-fluid">
                                 <table class="table table-striped">
                                    <thead>
                                      <tr>
                                        <th ng-repeat="c in ordered_columns">{{ c.title }}
                                        </th>
                                      </tr>
                                      </thead>
                                      <tbody>
                                        <tr ng-repeat="ds in data">
                                          <td ng-repeat="c in ordered_columns">{{ d[c.title] }}</td>
                                        </tr>
                                      </tbody>
                                  </table>
                                </div>

控制台没有错误。 table headers 显示正确。但是，数据不会填充到 table 中。如果我在 $scope.data 中硬编码 json，table 会正确填充。任何帮助将不胜感激。

Answer 1

当你获取 GET 响应时，你写 $scope.data = data; 而你对 $scope.data

什么都不做

变化：

 $http.get(urlBase+'/hello?input=raina').
     success(function(data) {
        //alert(data);  
        $scope.data=data; 
        alert($scope.data);
     });

至：

 $http.get(urlBase+'/hello?input=raina').
     success(function(data) {
        //alert(data);  
        $scope.all_columns=data; 
        alert($scope.data);
     });

因为我看到你用 $scope.all_columns

填充你的 table

来自 json 的 Angular JS 中的动态 Table

Dynamic Table in Angular JS from json

javascript

jquery

json

dynamic

angularjs