javascript - 无法将动态数据加载到 ui-grid 下拉列表中

Question

我正在使用 ui-grid与 AngularJS (和后端的 MySQL)用于一个项目。我有一个表，它从 MySQL 数据库中获取数据。它的行(或单元格)是可编辑的(如 ui-grid 网站上的 example 中所述)。表格的一列有下拉菜单。如该示例中所述，下拉列表与硬编码数据完美配合。我想从数据库中填充它，但每次我尝试时它都显示空的下拉列表。

从数据库中获取数据是由服务完成的，该服务被注入(inject)到 Controller 中，目的是运行从数据库中获取数据的代码(即 $http.get('/some/route'))，这样我们就拥有了所有的在页面加载之前或加载时，表格行和下拉列表的数据在手。

但是在打印时获取下拉列表数据的变量 (sitesD) 显示它是未定义的。

这是 Controller :

angular.module('WorkersCtrl', []).controller('WorkersController', function($scope, $http, serverData) {

$scope.gridOptions = {enableHorizontalScrollbar: 1};

/* getting rows from databse by using "serverData" custom service */
serverData.getData().then(function(response) {
        $scope.gridOptions.data = response.data[0];
        $scope.sitesData = response.data[1];
});
var sitesD = $scope.sitesData;
$scope.gridOptions.columnDefs = [
    { field: 'first_name', width:150, enableCellEdit: true},
    { field: 'last_name', width:150},
    { field: 'father_first_name', width:150},
    { field: 'father_last_name', width:150},
    { field: 'mother_first_name', width:150},
    { field: 'mother_last_name', width:150},
    { field: 'sex', width:50, editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
          { id: 'M', gender: 'Male' },
          { id: 'F', gender: 'Female' }]},
    { field: 'address', width:250},
    { field: 'phone', width:100, type: 'number'},
    { field: 'date_of_birth', width:150, type: 'date', cellFilter: 'date:"yyyy-MM-dd"'},
    { field: 'post_code', displayName: 'Post', width:50},
    { field: 'joining_date', width:150, type: 'date', cellFilter: 'date:"yyyy-MM-dd"'},
    { field: 'rate', width:50, type: 'number'},
    { field: 'site_name', width:150, editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownIdLabel:'site_id', editDropdownValueLabel: 'site_name', editDropdownOptionsArray: sitesD },
];
alert(sitesD); //checking the variable value: it shows undefined.

$scope.gridOptions.onRegisterApi = function(gridApi){
    $scope.gridApi = gridApi;
};

$scope.addData = function() {
    $scope.gridOptions.data.push({
        'first_name': '',
        'last_name': '',
        'father_first_name': '',
        'father_last_name': '',
        'mother_first_name': '',
        'mother_last_name': '',
        'sex': '',
        'address': '',
        'phone': '',
        'date_of_birth': '',
        'post_code': '',
        'joining_date': '',
        'rate': '',
        'site_name': ''
    });
};
});

服务代码如下:

angular.module('GeekService', []).factory('serverData', ['$http', function($http) {
    return {
        getData: function() {
            return $http.get('/workers')
        }
    }
}]);

这是 alert(sitesD); 运行时的页面截图:

我的理解是变量在页面加载后获取值，因此 editDropdownOptionsArray 没有获取下拉列表的值。

所有这些都是我在寻找解决方案时做出的假设，但还没有成功。请帮我。我觉得我什至不明白问题出在哪里。

如有需要，请随时询问更多信息。

PS:在写问题时我发现我的 Angular 和 ui-grid 之间存在版本不兼容的问题。 ui-grid 3.x 与 Angular 的 1.4.x 兼容，但我将 ui-grid 3.x 与 Angular 1.5.5 一起使用。这可能是原因吗？

编辑:这是屏幕截图，显示了下拉菜单的外观:

Answer 1

哈曼普瑞特

由于您是异步引入动态内容，因此我建议查看 ui-grid“editDropdownRowEntityOptionsArrayPath”功能而不是“editDropdownOptionsArray”，因为正如您现在发现的那样，该功能似乎适用于静态值。在 UI-grid API 站点上有这方面的信息:http://ui-grid.info/docs/#/api/ui.grid.edit.api:ColumnDef

如果数据是一个静态列表并且不会改变或依赖，那么下面的代码也许也可以工作，感谢您的联系:

serverData.getData().then(function(response) {
    $scope.gridOptions.data = response.data[0];
    $scope.sitesData = response.data[1];

    // You may have to shape data in a method before doing the next line
    // ex: var sitesArray = shapeSitesData();

    $scope.gridOptions.columnDefs[13].editDropdownOptionsArray = $scope.sitesData;
});

由于 Stackoverflow 不尊重新人的意见，我无法对您的晶体管线程发表评论。希望您能看到这一点，因为我相信它会有所帮助。您遇到的问题也可能是由于 ui-grid 在映射 id 和值方面做得不好。您应该尝试我的变体(我相信它改进了@mltroutt 的解决方案)。

angular.module('app')
     .controller('yourctrl', yourFunction)
     .filter('griddropdown', function () {
    return function (input, context) {
        var fieldLevel = (context.editDropdownOptionsArray == undefined) ? context.col.colDef : context;
        var map = fieldLevel.editDropdownOptionsArray;
        var idField = fieldLevel.editDropdownIdLabel;
        var valueField = fieldLevel.editDropdownValueLabel;
        var initial = context.row.entity[context.col.field];
        if (typeof map !== "undefined") {
            for (var i = 0; i < map.length; i++) {
                if (map[i][idField] == input) {
                    return map[i][valueField];
                }
            }
        }
        else if (initial) {
            return initial;
        }
        return input;
    };

然后把这个添加到你的coldef中

cellFilter: 'griddropdown:this'