UI-网格未显示 JSON 数据？

Question

我有我认为是绑定我的 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 -

我想我很接近...

Answer 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;
});

UI-网格未显示 JSON 数据？

UI-Grid not displaying JSON data?

json

angularjs

angular-ui-grid