来自json的Angular JS中的动态表

I am trying to generate a dynamic table from Angular JS by receiving a response from Spring Rest Service.

我试图通过接收Spring Rest Service的响应从Angular JS生成动态表。

This is my code:

这是我的代码:

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

There are no errors in the console. The table headers are displayed correctly. However, the data does not get populated in the table. If I hardcode the json in $scope.data, the table gets populated properly. Any help would be appreciated.

控制台中没有错误。表头正确显示。但是,数据不会填充到表中。如果我在$ scope.data中对json进行硬编码,则表格会正确填充。任何帮助,将不胜感激。

1 个解决方案

#1

When you fetch your GET response, you write $scope.data = data; and you do nothing with $scope.data

当你获取GET响应时,你写$ scope.data = data;并且你对$ scope.data什么都不做

change:

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

to:

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

Because I see you populate your table from $scope.all_columns

因为我看到你从$ scope.all_columns填充你的表

#1