AngularJS 中帶有 ng-repeat 的動態數據標題

Question

我正在尋找一種解決方案來在 angular 表中顯示動態 header 的一些<td>我的數據看起來像

let data = [    
    {
    id: 1,
    name: 'name',
    fields: {
    field 1: { value: '123'},
    field 2: {value: 'macx'}
    }
    },
    {
    id: 2,
    name: 'name2',
    fields: {
    field 1: { value: '456'},
    field 2: {value: '3333'}
    }
    }
]

它應該顯示在一個表中，我的意思是字段 attr 應該在同一個表中顯示為額外的列 注意：字段是動態的，我不能確切知道它所以我需要在代碼中做這樣的事情，如果我知道如何得到該工作或任何其他想法以獲得解釋的視圖

<tr ng-repeat="data in $data">
    <td data-title="'id'|translate"
        sortable="'id'">
    {{data.id}}
    </td>
    <td ng-repeat="(key, value) in data.fields track by $index"
        ng-show="columnsHash[key]"
        data-title="customFieldsTitles[$index]"
        filterable="{field:'fields', type:'text', align:'LEFT'}"
        data-title-text="customFieldsTitles[$index]">
      {{value && value.value || ''}}
    </td>
    <td ng-show="columnsHash.totalBenefitTarget"
        data-title="'target_total_benefit' | translate"
        sortable="'total_benefit_target'"
        style="text-align:center;"
        filterable="{field: 'total_benefit_target', type:'number_range', options: {min:  Number.MIN_VALUE, max: Number.MAX_VALUE}}">
      {{data.total_benefit_target | number: 0}}
    </td>
    <td ng-show="columnsHash.totalBenefitActual"
        data-title="'actual_total_benefit' | translate"
        sortable="'total_benefit_actual'"
        style="text-align:center;"
        filterable="{field: 'total_benefit_actual', type:'number_range',
        options: {min:  Number.MIN_VALUE, max: Number.MAX_VALUE}}">
      {{data.total_benefit_actual | number: 0}}
    </td>
<tr>

顯示列順序很重要，所以像上面的代碼一樣編寫它提前謝謝

Answer 1

angular table use scope.$column to render tb cols so I solved that by using scope binding 
<table ng-table="tableParams" ng-init="initTable()">
<td ng-repeat="(key, value) in data.fields"
                data-title="'Custom Field'"
                sortable="'fields'"
                filterable="{field:'fields', type:'text', align:'LEFT'}">
              {{value && value.value || ''}}
 </td>
</table>

in controller
    var tableColumns;
    $scope.initTable = function(){
      var scope = this;
      $timeout(function(){
        tableColumns = scope.$columns;
      });
    };
    after loading data for table call this function to update columns title
     function updateCustomFields(){
      var columnTemplate, index;
      var colCount = 0;
      if (!tableColumns) {
        return;
      }
      tableColumns.map(function(col, i){
        if (col.title() === 'Custom Field'){
          columnTemplate = col;
          index = i;
          tableColumns.splice(index, 1);
          return true;
        }
      });
      for(var fieldLabel in $scope.customFieldsHash){
        (function (label) {
          var column = angular.copy(columnTemplate);
          column.id = column.id+colCount/10;
          column.title = function(){ return label; };
          tableColumns.splice(index+colCount, 0, column);
          colCount++;
        })(fieldLabel);
      }
    }