用戶界面網格將不會顯示

試圖按照提供的文檔here on their website，但仍然無法使其工作。我正在使用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>

我的數據庫工作;我能夠在控制檯中循環顯示信息。它只是不顯示在網格中。我沒有控制檯錯誤。

在此先感謝您的幫助！

來源

2016-08-18 FF5Ninja

它看起來像你需要這樣設置網格數據：。

$scope.gridOptions.data = data.Items;

由於data.Items是對象數組。

來源

2016-08-18 21:21:36

嘗試將「columndefs」更改爲「columnDefs」和「enablingorting」以「enableSorting」。這就是我看到的頂端，但我仍在尋找。你在你的HTML ng-app="App"後也失蹤「ng-controller="GridCtrl"此外，請確保您包括了電網的腳本，並注入到你的模塊

來源

2016-08-18 21:13:38

除了@GDan，有沒有在HTML文件中指定的控制器，只有納克應用內=「應用程序」。請嘗試在加入納克控制器=「GridCtrl」圍繞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

用戶界面網格將不會顯示

回答

相關問題