获取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数据到角网格

回答

相关问题