javascript - Dynamic data-title with ng-repeat in AngularJS

Question

I'm looking for a solution to show dynamic header in the angular table for some of its <td> my data looks like

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'}
    }
    }
]

it should show in one table, I mean fields attr's should show as extra columns in the same table note: fields are dynamic and I can't know it exactly so I need to do something like this in code if any idea how I can get that work or any other idea to get the view as explained

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

showing columns order is important so writing it like code above thanks in advance

Answer 1

等待大神答复