UI Grid wird nicht angezeigt

Versuchen, die bereitgestellten Dokumente here on their website zu folgen, aber immer noch nicht in der Lage, es zur Arbeit zu bekommen. Ich scanne eine Tabelle mit AWS DynamoDB und versuche, die Informationen in der Tabelle innerhalb dieser UI grid anzuzeigen.UI Grid wird nicht angezeigt

Mein Controller:

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); 
    }]);

Meine Ansicht:

<!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>

Meine Datenbank arbeitet; Ich bin in der Lage, die Informationen in der Konsole zu wiederholen. Es wird nur nicht im Raster angezeigt. Ich habe keine Konsolenfehler.

Vielen Dank im Voraus für jede Hilfe!

Quelle

2016-08-18 FF5Ninja

Es sieht aus wie Sie die Rasterdaten wie folgt festlegen müssen..

$scope.gridOptions.data = data.Items;

Da data.Items ist das Array von Objekten.

Quelle

2016-08-18 21:21:36

Versuchen Sie, "columndefs" zu "columnDefs" und "envicesorting" zu "enableSorting" zu ändern. Das sehe ich von oben, aber ich suche immer noch. Sie fehlt auch "ng-controller="GridCtrl" nach ng-app="App" in Ihrem HTML Stellen Sie außerdem sicher, dass Sie das Skript für das Raster aufgenommen und in das Modul eingespritzt

Quelle

2016-08-18 21:13:38

Zusätzlich zu @GDan, gibt es keinen Controller in der HTML-Datei angegeben. Nur ng-app = "App". Versuchen Sie, ng-Controller = "GridCtrl" in eines der übergeordneten divs, die die ui-grid-Direktive umgeben

CodePen und Snippet unten: 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>

Quelle

2016-08-18 21:25:55 LethargicGeek

UI Grid wird nicht angezeigt

Antwort

Verwandte Themen