ダイナミックデータをuiグリッドドロップダウンに読み込むことができません

Question

とAngularJS（およびバックエンドのMySQL）をプロジェクトに使用しています。私はMySQLデータベースからそのデータを取得するテーブルを得ました。その行（またはセル）は編集可能です（ui-grid Webサイトのexampleに記載されています）。テーブルの1列にドロップダウンがあります。ドロップダウンは、この例で説明したように、ハードコードされたデータで完全に動作しています。私はデータベースからそれを設定したいのですが、私が試したたびに空のドロップダウンリストが表示されます。

データベースからデータを取得することは、データベースにデータを取得するコード（つまり$ 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：質問を書いているうちに、私の角とuiグリッドの間にバージョンの非互換性があります。 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]あなたのデータが含まれていない、またはあなたが持っていますサーバー側のロジックに問題があります。

あなたのデータは次のeditDropdownOptionsArray: $scope.sitesData

編集変更してみてください、then警告に正しく表示されない場合：私の溶液中でを、私は$ 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、

あなたが非同期的に動的なコンテンツにもたらしているので、その機能は、あなたが発見しているような静的な値のために意味しているように見えるように私は、代わりに「editDropdownOptionsArray」のUIグリッド「editDropdownRowEntityOptionsArrayPath」機能を見てお勧めします今。 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の解決策を改善すると信じています）を試すべきです。あなたは `$ http`でデータを取得した後

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; 
    }; 

そして、` $のscope.apply（）を使用し、あなたのcoldef

cellFilter: 'griddropdown:this'