UI Grid не будет отображаться

0

Попытка следовать документам, представленным здесь на их веб-сайте, но все еще неспособным заставить его работать. Я просматриваю таблицу с помощью AWS DynamoDB и пытаюсь отобразить информацию в таблице в этой UI grid.

Мой контроллер:

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>

Моя база данных работает; Я могу зацикливать и отображать информацию в консоли. Он просто не отображается в сетке. У меня нет консольных ошибок. Изображение 174551

Заранее благодарю за любую помощь!

Теги:
angular-ui-grid

3 ответа

2
Лучший ответ

Похоже, вам нужно установить данные сетки следующим образом:

$scope.gridOptions.data = data.Items;

Поскольку data.Items - это массив объектов.

Поделиться
1

В дополнение к @GDan в файле HTML не указан контроллер. Только ng-app = "App". Попробуйте добавить ng-controller = "GridCtrl" в один из родительских div, окружающих директиву ui-grid.

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>
Поделиться
1

Попробуйте изменить "columndefs" на "columnDefs" и "enableorting" на "enableSorting". Это то, что я вижу сверху, но я все еще смотрю. Вам также не хватает " ng-controller="GridCtrl" после ng-app="App" в вашем HTML. Также убедитесь, что вы включили скрипт для сетки и ввели в ваш модуль.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню