来自json的Angular JS中的动态表

Question

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

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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填充你的表