gridOptions、angular-ui-grid 和来自服务的 REST 调用的 $scope 问题

Question

我似乎在让我的 ng-grid 指令从返回的 REST api json obj 填充时遇到问题。我已经确认返回了一个有效的 json obj，并且我已经检索到我需要的数据的嵌套 obj。它似乎没有进入 gridOptions 函数。其中 myData 是正确有效的 json。任何帮助将不胜感激。我现在正在拔头发。这是我的服务：网格-service.js

'use strict';
app.factory('GridService', ['$http', '$q', function($http, $q) {
    var apiUrl = "http://xx.xx.xx.xx/coName/public/index.php/";

// configure the send request
function sendRequest(config){
    var deferred = $q.defer();
    config.then(function(response){
        deferred.resolve(response);
    }, function(error){
        deferred.reject(error);
    });
    return deferred.promise;
}

// retrieve all
function getRoles() { 
    var request = $http({
        method: 'GET',
        url: apiUrl + 'roles'
    }); 
    return sendRequest(request);
}

return {        
    getRoles: getRoles                
};
}]);

我在这里将它注入我的 ctrl，以及我的 init 函数和 gridOption 函数：

app.controller('ModuleCtrl', [ '$scope', '$http', '$modal', '$filter', 'GridService', function($scope, $http, $modal, $filter, gridService) {
    var initializeGrid = function(){        
    getRoles(); 
};
var getRoles = function(){
    gridService.getRoles().then(function(myRoles){
    var myRolesData = myRoles.data._embedded.roles;            
    $scope.myData = myRoles.data._embedded.roles;
    console.log($scope.myData);
});
};
$scope.gridOptions = {
    data: 'myData',
    enableRowSelection: true,
    enableCellEditOnFocus: true,
    showSelectionCheckbox: true,
    selectedItems: $scope.selectedRows,
    columnDefs: [{
       field: 'ID',
       displayName: 'Id',
       enableCellEdit: false
    }, {
       field: 'APP_ID',
       displayName: 'Module ID',
       enableCellEdit: false
    }, {
       field: 'RLDESC',
       displayName: 'Role Description',
       enableCellEdit: true
    }, {
        field: 'APDESC',
        displayName: 'Module Description',
        enableCellEdit: true
    }, {
        field: 'ZEND_DB_ROWNUM',
        displayName: 'Record number',
        enableCellEdit: false
    }]
};            
// fire it up
initializeGrid();
}

我的完整json:

{
"_links": {
    "self": {
        "href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
    },
    "describedBy": {
        "href": "Some Fun Stuff"
    },
    "first": {
        "href": "http://xx.xx.xx.xx/coName/public/index.php/roles"
    },
    "last": {
        "href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
    }
},
"_embedded": {
    "roles": [
        {
            "ID": 1,
            "APP_ID": 1,
            "RLDESC": "Admin",
            "APDESC": "authLive",
            "ZEND_DB_ROWNUM": "1"
        },
        {
            "ID": 2,
            "APP_ID": 1,
            "RLDESC": "User",
            "APDESC": "authLive",
            "ZEND_DB_ROWNUM": "2"
        },
        {
            "ID": 4,
            "APP_ID": 1,
            "RLDESC": "SuperUser",
            "APDESC": "authLive",
            "ZEND_DB_ROWNUM": "3"
        }
    ]
},
"page_count": 1,
"page_size": 25,
"total_items": 3
}

Answer 1

从网格选项中删除以下行

data: 'myData'

然后在 getRoles() 中使用

$scope.gridOptions.data = myRolesData;

而不是

$scope.myData = myRoles.data._embedded.roles;

（也许你需要 $scope.myData 是出于除网格之外的其他原因，但如果不是，我认为以上就是你所需要的。我没有现场测试过，但它应该可以工作。）

gridOptions、angular-ui-grid 和来自服务的 REST 调用的 $scope 问题

$scope issue with gridOptions, angular-ui-grid and REST call from service

json

angularjs

angular-ui-grid