UI-GRID動態列標題和對象數據的陣列

我有以下數據UI-GRID動態列標題和對象數據的陣列

vm.myData = 
     { 
      'Type' : 
      [ 
       'A', 
       'B', 
       'C' 
      ], 
      'Data': [ 
      { 
       'Key': 'XXX', 
       'AValues': 
       { 
        'ID': '1', 
        'Val': '10' 
       }, 
       'BValues': 
       { 
        'ID': '2', 
        'Val': '20' 
       }, 
       'CValues': 
       { 
        'ID': '2', 
        'Val': '20' 
       } 
      }, 
      { 
       'Key': 'TTT', 
       'AValues': 
       { 
        'ID': '2', 
        'Val': '30' 
       }, 
       'BValues': 
       { 
        'ID': '4', 
        'Val': '70' 
       }, 
       'CValues': 
       { 
        'ID': '2', 
        'Val': '20' 
       } 
      } 
      ] 
     };

我想要的數據顯示如下

Key A B C 
XXX 10 20 20 
TTT 30 70 20

我嘗試了很多方法，但沒能得到預期的結果。我希望列的名稱來自'myData'上的'Type'。我能夠通過硬編碼顯示第一行。

vm.gridOptions = { 
      columnDefs: [ 
       { name: 'Key', field: 'Data[0].Key'}, 
       { name: 'A', field: 'Data[0].AValues.Val'}, 
       { name: 'B', field: 'Data[0].BValues.Val'}, 
       { name: 'C', field: 'Data[0].CValues.Val'} 
      ], 
      data: vm.myData 
     };

我真的很感激任何幫助。

更新通過那仁Mulrali的建議去後，我做了下面這給了我希望的結果。但我有硬編碼列名（我需要不同的顯示名稱）。有沒有辦法從「myData的」

vm.gridOptions = { 
      columnDefs: [ 
       { displayName: 'Key', name: 'Key' }, 
       { displayName: 'A', name: 'AValues.Val' }, 
       { displayName: 'B', name: 'BValues.Val' }, 
       { displayName: 'C', name: 'CValues.Val' } 
      ], 
      data: vm.myData.Data 
     };

來源

2017-08-17 user2769614

您需要將對象轉換成角UI網格理解的格式，請參考下面的jsfiddle

「類型」數組動態獲取列標題

 angular.forEach($scope.myData.Data, function(value, index){ 
      value.AValues = value.AValues.Val; 
      value.BValues = value.BValues.Val; 
      value.CValues = value.CValues.Val; 
      $scope.myData.Data[index] = value; 
     });

的jsfiddle：link

來源

2017-08-17 20:02:34

我得到了想要的結果看着你的建議後。這不會改變數據。我更新了我的問題。 – user2769614

@ user2769614我明白你的意思，你想列動態生成動態，但有一個問題，我們是否需要使用vm.myData.Type數組爲這個，如果是的話爲什麼鍵不存在於這個數組？ –

關鍵是靜態列名，A，B，C是動態列名，我可能在將來想要D列，這就是爲什麼我試圖避免硬編碼，另一種方式我看到只是讓JSON發送'A' 'AValues'，我的專欄名稱是'A'。 – user2769614

UI-GRID動態列標題和對象數據的陣列

回答

相關問題