La grille d'interface utilisateur n'affiche pas les données Angular

Question

J'ai une grille d'interface utilisateur qui affiche le nom du groupe.

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


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

Pour les données dans la grille de l'interface utilisateur, je passe un tableau d'objets sous forme de:

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

Mais je ne reçois pas quoi que ce soit dans la grille de l'interface utilisateur.

Merci à l'avance

Answer 1

Vous imbriquant un niveau trop profond lors du passage des données.

au lieu de (l'équivalent de):

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

vous voulez juste passer toutes les données dans la propriété de données, de sorte que vous obtenez:

data: groupData 

Answer 2

Quelques observations:

• Votre $scope.groupData n'a pas un JSON valide.

  Il devrait être $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]

• Votre gridOptions objet devrait être comme ça.

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