無法將動態數據加載到UI網格下拉列表中

Question

我正在使用ui-grid和AngularJS（以及後端的MySQL）作爲項目。我有一張從MySQL數據庫獲取數據的表格。它的行（或單元格）是可編輯的（如在ui-grid網站上的example中所述）。表格的一列有下拉菜單。如該示例中所述，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);運行：

我的理解是可變的在頁面加載後獲取值，因此editDropdownOptionsArray對於下拉菜單沒有任何價值。

所有這些都是我在尋找解決方案時所做的假設，但尚未成熟。請幫幫我。我覺得我甚至不明白問題在哪裏。

如果需要，隨時提供進一步的信息。 PS：在寫我發現的問題時，我的Angular和ui-grid之間存在版本不兼容問題。 ui-grid 3.x與Angular 1.4.x兼容，但我使用ui-grid 3.x和Angular 1.5.5。這可能是原因嗎？

編輯：下面是截圖，顯示了下拉的樣子：

Answer 1

這是一個時間問題。在您撥打alert(sitesD)時，您的數據尚未加載。角度承諾是異步的，這就是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();。

Answer 2

Harmanpreet，

既然你帶來動態內容異步我會建議看UI格「editDropdownRowEntityOptionsArrayPath」的功能，而不是「editDropdownOptionsArray」作爲該功能似乎意味着靜態值要發現現在。有在UI網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; 
    }; 

那麼這個你得到`$ http`後的數據添加到您的coldef

cellFilter: 'griddropdown:this'