Angular UI-Grid无法获取数据显示

Question

我一直在阅读 Angular UI-Grid b/c 的示例，我们想在项目中使用它。我正在关注堆栈上的文档和示例。但是我无法让我的数据显示在我的 table 中。我已经根据其他人创建了这个 plunk，简化了我正在做的事情。我不确定为什么数据不会显示？？感谢任何帮助。

http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview

index.html

<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div ng-controller="appController ">
    <div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>


<script src="app.js"></script>

</body> 


</html>

app.js

var myApp =  angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit',  'ui.grid.rowEdit', 'ui.grid.resizeColumns'])

myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {


$scope.columns = [
    { name: 'colA', enableCellEdit: true},
    { name: 'colB', enableCellEdit: true },
    { name: 'colC', enableCellEdit: true },
    { name: 'colD', enableCellEdit: true },
    { name: 'colE', enableCellEdit: true },
    { name: 'colF', enableCellEdit: true }
];

$scope.gridOptions = {
    enableCellEditOnFocus: false,
    enableSorting: true,
    enableGridMenu: true,
    columnDefs: $scope.columns,
    onRegisterApi: function(gridApi){
        $scope.gridApi = gridApi;
        gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
    }
};

$scope.saveRow = function( rowEntity ) {
    // create a fake promise - normally you'd use the promise returned by $http or $resource
    console.log("record EDIT" + angular.toJson(rowEntity));
    var promise = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise );

    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
    $interval( function() {
        if(rowEntity.test_status === 'Active') {
             console.log("accepting edit, b/c status is Active");
            promise.resolve();
        }else {
            console.log("rejecting edit, b/c status is Inactive");
            promise.reject();
        }
    }, 1000, 1);
};

  $http.get('data.json')
  .success(function(data) {
    console.log("data == " + angular.toJson(data));
    $scope.gridOptions.data = data;
  });
}]);

JSON数据

   [
    {
        "testA": "1","description": "test1","order": "1","test_status": "Active"
    },
    {
        "testB": "2","description": "test2","order": "2","test_status": "Active"
    },
    {
        "testC": "3","description": "test3","order": "3","test_status": "Active"
    },
    {
        "testD": "4","description": "test4","order": "4","test_status": "Inactive"
    },
    {
        "testE": "5","description": "test5","order": "5","test_status": "Active"
    }
  ]

CSS

.mygrid {
  width: 450px;
  height: 150px;
}

Answer 1

其实原因很简单。您的 columnDefs 对象中的列名称与您从 $http 调用返回的 json 不匹配。更改

$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];

对此：

$scope.columns = [
{ name: 'test', enableCellEdit: true},
{ name: 'description', enableCellEdit: true },
{ name: 'order', enableCellEdit: true },
{ name: 'test_status', enableCellEdit: true }
];

并确保将 json 数据的值从 "testA"、"testB"、"testC" 等更改为简单的 "test"。

Angular UI-Grid无法获取数据显示

Angular UI-Grid can not get data to display

angularjs

angular-ui-grid