UI 网格不会显示

Question

尝试遵循提供的文档 here on their website，但仍然无法正常工作。我正在使用 AWS DynamoDB 扫描 table，并尝试在 UI grid.

中显示 table 中的信息

我的控制器：

angular.module('App')
  .controller('GridCtrl', ['modelObjects', '$scope', 'dbCall', function(modelObjects, $scope, dbCall) {

    $scope.gridOptions = {
      enablesorting: true,
      columndefs: [{
        field: 'ref id'
      }, {
        field: 'group'
      }, {
        field: 'cost center'
      }, {
        field: 'cost center description',
      }, {
        field: 'recruitment firm',
        enablesorting: false
      }],
    };

    $scope.updateGrid = function(data) {
      // for (var key in data) {
      //   var item = data[key];
      //   for (var key2 in item) {
      //     console.log(item[key2]);
      //     $scope.gridOptions.data = item[key2];
      //   }
      // }
      $scope.gridOptions.data = data;
    };

    $scope.scanPosition = function() {
      var params = {};
      return dbCall('addGrid', params, $scope.check);
    };

    $scope.check = function(err, data) {
      if (err) {
        $scope.results = "Failure: Unable To Connect To Database";
        console.log(err);
      }
      else {
        $scope.results = "Success: Position Table Scanned";
        console.log(data);
        $scope.updateGrid(data);
      }
    };
    setTimeout(function() {
      $scope.scanPosition();
    }, 50);
  }]);

我的看法：

<!DOCTYPE html>
<html>
    <head></head>
    <body ng-app="App">
        <div class="col-lg-10 col-lg-offset-2 col-sm-9 col-sm-offset-3 col-xs-12">
            <div class="container-fluid">
                <br>
                <div class="panel panel-default" style="align: center; border:1px solid #d4d4d4;">
                    <div class="panel-heading" style="text-align: center;">
                        <h3>Grid Page</h3>
                    </div>
                </div>
                <div ui-grid="gridOptions" class="myGrid"></div>
            </div>
        </div>
    </body>
</html>

我的数据库正在运行；我能够循环并在控制台中显示信息。它只是没有显示在网格中。我没有控制台错误。

在此先感谢您的帮助！

Answer 1

尝试将 "columndefs" 更改为 "columnDefs"，将 "enablesorting" 更改为 "enableSorting"。这就是我从顶部看到的，但我仍在寻找。您还缺少 HTML 中的 ng-app="App" 之后的“ng-controller="GridCtrl"”。此外，请确保包含网格脚本并注入到模块中。

Answer 2

看来您需要这样设置网格数据：

$scope.gridOptions.data = data.Items;

因为data.Items是对象数组。

Answer 3

除了@GDan，HTML 文件中没有指定控制器。只有 ng-app="App"。尝试在 ui-grid 指令周围的父 div 之一中添加 ng-controller="GridCtrl"。

下面的 CodePen 和代码片段： http://codepen.io/Lethargicgeek/pen/rLbZGp?editors=1010

angular.module('App', ['ui.grid']);

(function() {
  angular.module('App').controller('GridCtrl', ctrlFn);
  ctrlFn.$inject = ['modelObjects', 'dbCall', '$timeout'];

  function ctrlFn(modelObjects, dbCall, $timeout) {
    var $ctrl = this;
    // BINDING 
    $ctrl.gridOptions = {
      enableSorting: true,
      columnDefs: [{
        field: 'ref id'
      }, {
        field: 'group'
      }, {
        field: 'cost center'
      }, {
        field: 'cost center description',
      }, {
        field: 'recruitment firm',
        enablesorting: false
      }],
    };
    // END BINDING

    // INIT
    $timeout(function() {
      scanPosition();
    }, 1000);
    // END INIT

    function updateGrid(data) {
      $ctrl.gridOptions.data = data;
    };

    function scanPosition() {
      var params = {};
      return dbCall.dbCall('addGrid', params, check);
    };

    function check(err, data) {
      if (err) {
        $ctrl.results = "Failure: Unable To Connect To Database";
        console.log(err);
      } else {
        $ctrl.results = "Success: Position Table Scanned";
        console.log(data);
        updateGrid(data);
      }
    };
  }
})();

// Mocked Service modelObjects
(function() {
  angular.module('App').service('modelObjects', svcFn);

  function svcFn() {}
})();

// Mocked Service dbCall
(function() {
  angular.module('App').service('dbCall', svcFn);

  function svcFn() {
    var svc = this;
    svc.dbCall = dbCall;

    function dbCall(action, params, callBackFn) {
      // Should really use a promise rather than a callbackFn
      callBackFn(null, [{
        'ref id': "fooRef",
        'group': "fooGroup",
        "cost center": "fooCostCenter"
      }]);
    }
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>

<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<head></head>

<body ng-app="App">
  <div class="col-lg-10 col-lg-offset-2 col-sm-9 col-sm-offset-3 col-xs-12" ng-controller="GridCtrl as $ctrl">
    <div class="container-fluid">
      <div>$ctrl.results: {{$ctrl.results}}</div>
      <div class="panel panel-default" style="align: center; border:1px solid #d4d4d4;">
        <div class="panel-heading" style="text-align: center;">
          <h3>Grid Page</h3>
        </div>
      </div>
      <div ui-grid="$ctrl.gridOptions" class="myGrid"></div>
    </div>
  </div>
</body>

</html>

UI 网格不会显示

UI Grid won't display

angularjs

angular-ui-grid