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

Question

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

从数据库中获取数据是通过服务完成的，该服务被注入到控制器中，意图运行从数据库获取数据的代码（即$ http.get（'/ some / route'）），以便我们拥有表的所有数据在页面加载之前或加载时手中的行和下拉列表。

但是，在打印时获取下拉数据的变量（sitesD）显示它未定义。

这是控制器：

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);的页面截图alert(sitesD); 运行：

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

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

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

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

编辑：这是截图，显示下拉列表的外观：

Answer 1

Harmanpreet，

由于您是异步引入动态内容，我建议您查看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'

Answer 2

这是一个时间问题。 在您调用alert(sitesD) ，您的数据尚未加载。 Angular promises是异步的，这就是then语句的用法。

如果您在then移动警报，则应显示下拉数据：

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

如果它仍未定义，则response.data [1]不包含您的数据，或者您的服务器端逻辑出现问题。

如果您的数据确实在then警报中正确显示，请尝试更改editDropdownOptionsArray: $scope.sitesData

编辑：在我的解决方案中，我使用角度资源而不是$ http，它的工作原理如上所述。 你可能想试试这个，虽然我希望它能以你用$ http编码的方式工作。

angular.module('siteDataService', ['ngResource'])
.factory('siteData', function($resource) {
  return $resource('/workers', {}, {
    query: { method:'GET', isArray: true }
  }
});

确保在HTML中包含angular-resource.js ，并在应用程序中依赖siteDataService ，并在控制器中添加siteData 。

要运行查询，您需要使用$scope.serverResponse = siteData.query(); 在你的控制器的身体。