UI 网格未显示数据 Angular

Question

我确实有一个显示组名称的 UI 网格。

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


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

对于 UI 网格中的数据，我以以下形式传递对象数组：

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

但我在 UI 网格中没有得到任何东西。

提前致谢

Answer 1

传递数据时嵌套太深了一层。

而不是（相当于）：

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

你只想传递数据属性中的所有数据，所以你得到：

data: groupData

Answer 2

一些观察：

您的 $scope.groupData 没有有效的 JSON.

应该是$scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]

你的gridOptions对象应该是这样的

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

演示版

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>

UI 网格未显示数据 Angular

UI grid not displaying data Angular

angularjs

angular-ui-grid