UI-Grid不显示JSON数据?

时间:2016-04-13 14:59:21

标签: angularjs json angular-ui-grid

我认为用于绑定我的UI-Grid控件的正确访问器语法,我没有得到任何错误或任何数据。我刚收到关于变异原型的警告。

我的json数据结构如下:

{
  "records": [
    {
      "acctIdInfo": {
        "acctId": "257905480",
        "acctCode": "ABC10101102",
        "acctName": "BIG CORPORATION",
        "acctRole": [
          "C"
        ]
      },
      "acctNameAddr": {
        "addressLine": [
          "7280 JAMISON ST"
        ],
        "cityName": "VANCOUVER",
        "stateCd": "US-WA",
        "countryCd": "US",
        "postalCd": "97979"
      }
    }
    ]
}

要绑定的AngularJS控制器中的代码是:

var app = angular.module('app', ['ui.grid', 'ngResource'])

  .factory('jsonDataFactory', function ($resource) {
    return {
      custData: $resource('data.json', {}, {
        query: {method: 'GET', params: {}, isArray: false}
      }),

    };
  });

app.controller('MainCtrl', ['$scope','$resource','jsonDataFactory',  function ($scope,$resource,  jsonDataFactory) {
  $scope.gridOptions = { 
    enableRowSelection: true,
    enableSelectAll: true,
    selectionRowHeaderWidth: 35
  };

  $scope.gridOptions.columnDefs = [
    { name: 'acctIdInfo.acctId' },
    { name: 'acctIdInfo.acctCode'},
    { name: 'acctIdInfo.acctName'},
    { name: 'acctNameAddr.addressLine' }
  ];

  $scope.gridOptions.data = jsonDataFactory.custData.query().records;
  $scope.CustomerData = [];
  $scope.CustomerData = jsonDataFactory.custData.query();
  console.log($scope.CustomerData);
  $scope.gridOptions.data = $scope.CustomerData.records;


}]);

这是我的plnk of what I tried -

我想我很接近......

1 个答案:

答案 0 :(得分:1)

一旦ajax呼叫响应返回,就会将数据分配给ui-grid数据源。我假设您使用了$resource,因此您可以承诺使用它来附加回调函数。

jsonDataFactory.custData.query().$promise.then(function(response){
   $scope.CustomerData = response;
   console.log($scope.CustomerData);
   $scope.gridOptions.data = $scope.CustomerData.records;
});