獲取Ajax數據到角網格

使用Angular Grid，我得到了ajax在console.log中獲取數據。但是一個空網格。獲取Ajax數據到角網格

控制檯日誌上寫着：

[13:56:11.411] now!! 
[13:56:11.412] [] 
[13:56:11.412] now!! 
[13:56:11.556] <there is data returned from console.log(getData); >

這是js文件。

// main.js 
var app = angular.module('myApp', ['ngGrid']); 

var getData = []; 

function fetchData() { 
    var mydata = []; 

    $.ajax({ 
     url:'/url/to/hell', 
     type:'GET', 
     success: function(data) { 

      for(i = 0, j = data.length; i < j; i++) { 
       mydata[i] = data[i]; 
      } 
      getData = mydata; 
      console.log(getData); 
     } 
    });  
} 
fetchData();  


app.controller('MyCtrl', function($scope) {  

    console.log('now!!') 
    console.log(getData) 
    console.log('now!!') 

    $scope.myData = getData 


    $scope.gridOptions = { 
     data: 'myData', 
     showGroupPanel: true 
    }; 
});

新的js文件：

// main.js

var app = angular.module('myApp', ['ngGrid']); 

app.controller('MyCtrl', function($scope, $http) {   
function fetchData() { 
    $http({ 
     url:'/url/to/hell', 
     type:'GET'}) 
     .success(function(data) { 
      $scope.myData = data;  
      $scope.gridOptions = { 
        data: 'myData', 
        showGroupPanel: true 
       };    
     });   
} 
fetchData();  
});

HTML文件。

<html ng-app="myApp"> 
     <head lang="en"> 
      <meta charset="utf-8"> 
      <title>Blank Title 3</title> 
      <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" /> 
      <link rel="stylesheet" type="text/css" href="../static/css/style.css" /> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> 
      <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script> 
      <script type="text/javascript" src="../static/js/main.js"></script> 
     </head> 

     <body ng-controller="MyCtrl"> 

      <div class="gridStyle" ng-grid="gridOptions"></div> 
     </body> 
    </html>

來源

2013-02-27 Merlin

您的控制器可能在.success完成之前訪問getData數組。你正在訪問變量，在promise函數之外，它被初始化爲一個空數組。

爲什麼不嘗試將fetchData函數放入控制器（現在）並將getData直接存儲到.success中的$ scope.myData中？甚至可能在那裏初始化網格？不知道如果你能做到這一點，但如果你可以把它看起來像這樣：

app.controller('MyCtrl', function($scope, $http) { 
$scope.myData = ''; 
$scope.gridOptions = { showGroupPanel: true, data: 'myData' }; 
function fetchData() { 
    setTimeout(function(){ 
     $http({ 
      url:'/url/to/hell', 
      type:'GET'}) 
      .success(function(data) { 
       $scope.myData = data; 
       if (!$scope.$$phase) { 
        $scope.$apply(); 
       }     
      });   
    }, 3000);  
} 
fetchData();  
});

（來源一些$範圍的申請材料：https://github.com/angular-ui/ng-grid/issues/39）

而且不知道你爲什麼在混合帶有角碼的$ jQuery .ajax（$ http會這樣做），以及爲什麼你的javascript沒有分號。

來源

2013-02-27 19:50:48

如何定義$ http？ – Merlin 2013-02-27 20:01:54

對不起，更新了代碼片段。你只需要像$ scope一樣注入它。 $ http是核心角度服務。如果你有一個RESTful API，你也可以使用$ resource進行進一步的抽象。 – 2013-02-27 20:30:58

我做到了;拋出一個錯誤「options is undefined」 – Merlin 2013-02-27 20:37:24

如果你爲你的請求定義了一個服務，這將會更容易（和更多的Angular）。沿着這些路線的東西：

angular.module('hellServices', ['ngResource']) 
    .factory('Hell', function ($resource) { 
    return $resource('URL/TO/HELL', {}, { 
     query: { method: 'GET' } 
    }); 
    });

確保包括它在你的應用程序：

app.controller('MyCtrl', function($scope, $http, Hell) { 
$scope.myData = Hell.query();

然後設置：

var app = angular.module('myApp', ['ngGrid', 'hellServices']);

然後你就可以在你的控制器得到一個承諾吧網格選項來查看其數據承諾（如您已經這樣做）：

$scope.gridOptions = { 
    data: 'myData', 
    showGroupPanel: true 
};

如果你這樣做，你不必擔心$ scope。$ apply，因爲它會爲你處理。這是更清潔，更容易遵循。對角服務

... 
$scope.myData = Hell.query(function(hell) { 
    // code that modifies 'hell' 
});

退房的official docs：如果您仍需要一個回調一旦它從服務器返回修改數據，傳遞函數爲您服務的query()功能。基礎知識也包含在Angular JS官方教程的Step #11中。

來源

2013-03-06 18:13:38 Benmj

獲取Ajax數據到角網格

回答

相關問題