Question

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

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

但是在打印时获取下拉数据的变量（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);运行时页面的屏幕截图：

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

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

如果需要，请随时提供更多信息。

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

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

Answer 1

Harmanpreet，

由于您以异步方式引入动态内容，我建议您查看ui-grid＆＃34; editDropdownRowEntityOptionsArrayPath＆＃34;功能而不是＆＃34; editDropdownOptionsArray＆＃34;正如您现在发现的那样，该功能似乎意味着静态值。 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＆＃39; s解决方案）。

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();。

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

2 个答案: