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) { 
 
\t \t 
 
    $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) { 
 
\t \t //alert(data); \t 
 
\t \t $scope.data=data; 
 
\t \t alert($scope.data); 
 
\t }); 
 
\t 
 
    
 
    $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"> 
 
           \t <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