Question

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

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


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

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

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

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

提前致谢

Answer 1

一些观察结果：

您的 $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
         }]
        };

<强>样本

＆＃13;

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

＆＃13;

</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;
}

＆＃13;

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

＆＃13;

Answer 2

传递数据时，您正在将一个级别嵌套得太深。

而不是（相当于）：

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

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

data: groupData

UI网格不显示数据Angular

2 个答案: