【问题标题】:ng-grid doesn't populate with angular $resourceng-grid 没有填充有角度的 $resource
【发布时间】:2014-05-29 20:06:33
【问题描述】:

我正在尝试填充 ng-grid,使用和 ngResource $resource 调用,但在 ng-grid 已经呈现之后,ajax 调用似乎总是为时已晚。 网格呈现标题但未填充数据。 这是代码的 sn-p 和 jsfiddle

    angular.module('api', [ 'ngResource' ]).factory("SERVICE", function($resource) {
    return $resource('/api/...', {}, {
        query : {
            method : 'GET',
            isArray : true,
            transformResponse : function(data, headers) {
                var responsedata = [], data = angular.fromJson(data);
                angular.forEach(data.el, function(item, idx) {
                    //do something to data and add it to responsedata
                    responsedata.push({"a": item.a});
                });
                return responsedata;
            }
        }
    });
});
var app = angular.module('myModule', [ 'ngResource', 'api', 'ngGrid' ]);
app.controller('GridController', [ '$scope', 'SERVICE', function($scope, svc) {
    $scope.myData = svc.query();
    $scope.gridOptions = {
        data : myData,
        columnDefs : [{
            field : "a",
            displayName : "a"
        }]
    };  
} ]);
<!-- the html-->
<div class="gridStyle" ng-grid="gridOptions" ng-controller="GridController"></div>

【问题讨论】:

    标签: angularjs ng-grid ngresource


    【解决方案1】:

    您需要返回一个promise 来填充网格,将svc.query() 更改为

    $scope.myData={};
     SERVICE.query()
                .$promise.then(function(data) {
              $scope.myData=data;
    
                }, function() {
                    //TODO:Handle Error
                });
    

    【讨论】:

    • 将代码更改为 svc.query().$promise.then(function(data) { $scope.myData = data; }, function() {alert('failed');}) ;但我得到了相同的行为,仍然没有填充数据。
    • 嗯,你能创建一个 plunker 吗?将您的数据模拟出来而不是真正的服务调用?
    • 网格中有数据,但我认为 odata 的表示方式是问题所在。 nggrid 范围有数据但无法访问它。
    【解决方案2】:

    请像这样编辑标记 html。

    <body  ng-app="myModule">
    <div ng-controller="GridController">
        <div class="gridStyle" ng-grid="gridOptions" ></div>
    </div>
    

    【讨论】:

      猜你喜欢
      • 2014-09-22
      • 2015-04-28
      • 1970-01-01
      • 1970-01-01
      • 2013-10-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-01-01
      相关资源
      最近更新 更多