UIグリッドが表示されない

提供されているドキュメントに従うことを試みても、here on their websiteが動作することができません。 AWS DynamoDBを使用してテーブルをスキャンし、このUI grid内のテーブルに情報を表示しようとしています。UIグリッドが表示されない

マイコントローラ：

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

あなたは、このようなグリッドデータを設定する必要があるように見えます：。。

data.Items以来

$scope.gridOptions.data = data.Items;

は、オブジェクトの配列です。

出典

2016-08-18 21:21:36

「columndefs」を「columnDefs」に変更し、「enablesorting」を「enableSorting」に変更してください。それが私がトップから見るものですが、私はまだ見ています。また、 "あなたのHTML内ng-app="App"後ng-controller="GridCtrl"を逃している。また、あなたはグリッドのためのスクリプトを含んでおり、あなたのモジュールの中に注入してください

出典

2016-08-18 21:13:38

@GDanに加えて、HTMLファイル内に指定されていませんコントローラがありません。唯一のNG-アプリ=「アプリケーション」。でNG-コントローラ=「GridCtrl」を追加してみてくださいui-gridディレクティブを囲む親divの1つ

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グリッドが表示されない

答えて

関連する問題