UI-Raster zeigt keine Daten an. Winkel

Question

Ich habe ein UI-Raster, das den Gruppennamen anzeigt.

$scope.gridOptions = { 
      enableSorting : false, 
      columnDefs: [ 
      { name:'GroupName' ,enableCellEdit:false} 
      ], 


      data: [ 
      { 'GroupName' : groupData} 
      ] 
     }; 

Für die Daten in UI Raster, i in Form ein Objekt Array bin vorbei:

groupData = [{"GroupName": "Mathematicians"}{"GroupName":"Scientist"}] 

sind aber nicht alles in den UI-Gittern zu bekommen. zu tief

Vielen Dank im Voraus

Answer 1

Sie nisten eine Ebene, wenn die Daten übergeben.

statt (das Äquivalent):

data: [ { 
    GroupName: [ 
     { GroupName: 'Mathematicians' }, 
     { GroupName: 'Scientist' } 
    ] 
} ] 

Sie nur wollen, um alle Daten in der Dateneigenschaft passieren, so erhalten Sie:

data: groupData 

Answer 2

Einige Beobachtungen:

• Ihre $scope.groupData hat keinen gültigen JSON.

  Es sollte $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]

• Ihr gridOptions Objekt sollte so sein.

  $scope.gridOptions = { 
       data: 'groupData', 
       enableSorting : false, 
       columnDefs: [{ 
        field: 'GroupName', 
        displayName: 'Group Name', 
        name:'GroupName', 
        enableCellEdit:false 
       }] 
       }; 
  

DEMO

var app = angular.module('uigrid', ['ngTouch', 'ui.grid']); 
 

 
app.controller('MainCtrl', ['$scope', function ($scope) { 
 
    $scope.gridOptions = { 
 
      data: 'groupData', 
 
      enableSorting : false, 
 
      columnDefs: [{ 
 
       field: 'GroupName', 
 
       displayName: 'Group Name', 
 
       name:'GroupName', 
 
       enableCellEdit:false 
 
      }] 
 
      }; 
 
      
 
      $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}] 
 
}]);

</style> <!-- remove this, it is just for jsfiddle --> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
 
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> 
 
<style> 
 
.grid { 
 
    width: 500px; 
 
    height: 250px; 
 
}

<div ng-app="uigrid"> 
 
    <div ng-controller="MainCtrl"> 
 
     <div ui-grid="gridOptions" class="grid"></div> 
 
    </div> 
 
</div>