UI Grid не отображает

Пытается следовать представленным документам here on their website, но все еще не может заставить его работать. Я просматриваю таблицу, используя AWS DynamoDB, и пытается отобразить информацию в таблице в этом UI grid.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>

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

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

источник

2016-08-18 FF5Ninja

Похоже, вам необходимо установить данные сетки, как это:..

$scope.gridOptions.data = data.Items;

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

источник

2016-08-18 21:21:36

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

источник

2016-08-18 21:13:38

в дополнение к @GDan, нет контроллера, указанный в HTML-файле. только нг-приложение = «App». Попробуйте добавить нг-контроллер = «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>

источник

2016-08-18 21:25:55 LethargicGeek

UI Grid не отображает

ответ

Смежные вопросы