Question

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

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

并确保将“testA”，“testB”，“testC”等的json数据值更改为“test”。

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

1 个答案: