Fatal编程技术网
  • javascript/
  • Javascript 将Ajax数据放入角度网格

Javascript 将Ajax数据放入角度网格

javascript angularjs

Javascript 将Ajax数据放入角度网格,javascript,angularjs,ng-grid,Javascript,Angularjs,Ng Grid,使用Angular Grid，我在console.log中获取ajax get数据。但是一个空的网格 控制台日志显示： [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); > HTML文件 <html ng-app="myApp"> <head l

使用Angular Grid，我在console.log中获取ajax get数据。但是一个空的网格

控制台日志显示：

[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); >
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>


空白标题3
在.success完成之前，您的控制器可能正在访问getData数组。您正在访问变量，它位于promise函数之外，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();    
});
（部分$scope应用程序的来源：）

还不清楚为什么要将jQuery.ajax与angular代码混合在一起（$http可以做到这一点），以及为什么javascript中没有分号。

如果您为请求定义了一个服务，这将更容易（而且角度更大）。大致如下：

angular.module('hellServices', ['ngResource'])
  .factory('Hell', function ($resource) {
    return $resource('URL/TO/HELL', {}, {
      query: { method: 'GET' }
    });
  });
确保将其包含在应用程序中：

var app = angular.module('myApp', ['ngGrid', 'hellServices']);
然后，您可以在控制器中得到承诺：

app.controller('MyCtrl', function($scope, $http, Hell) {  
$scope.myData = Hell.query();
然后设置网格选项以查看其数据的承诺（正如您已经做的那样）：

如果您这样做，就不必担心$scope.$apply，因为它将为您处理。这是更干净，更容易遵循。如果从服务器返回数据后仍需要回调来修改数据，请将函数传递给服务的
query（）
函数：

...
$scope.myData = Hell.query(function(hell) {
    // code that modifies 'hell'
});
查看有关角度服务的详细信息。官方Angular JS教程的第1部分也介绍了基础知识。

抱歉，更新了代码片段。您只需以与$scope相同的方式注入它$http是一个核心服务。如果你有一个RESTful API，你也可以使用$resource进行进一步的抽象？我没有看到名为options的变量。请尝试-抱歉。$scope对象没有按照前面的方法及时创建。因此，这里有一个绑定到网格数据的空对象，然后成功地更新数据。我有空白网格框架，就是我开始的地方。但是，帧中仍然没有数据。ajax，现在是$http，正在从本地数据库中提取数据 
app.controller('MyCtrl', function($scope, $http, Hell) {  
$scope.myData = Hell.query();

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

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