javascript - 来自 json 的 Angular JS 中的动态表

Question

我正在尝试通过接收来自 Spring Rest 服务的响应从 Angular JS 生成一个动态表。

这是我的代码:

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

控制台没有错误。表头显示正确。但是，数据不会填充到表中。如果我在 $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 填充你的表