Dynamically defined data-title with ng-table

Problem

I am working towards using ng-table to display reports in a tabular manner. However I have run into a problem using the data-title attribute and dynamically assigning the heading.

In the following example I am attempting to set the data-title attribute as follows.

<td ng-repeat="field in user" data-title="'{{ fields[$index] }}'">
  {{ field }}
</td>

$scope.fields = ["Names", "Ages"]; is defined within the controller. When inspecting the element, the data-title attribute is properly set however the headings are not properly processed resulting in the heading {{ fields[$index] }}.

Here is a live example: http://plnkr.co/edit/gBS6FGINayYufPGqCMxb?p=preview

Problem courtesy of: user2882597

Solution

1stofall, you have unnessesary '' in {{fields[$index]}}.

2nd - yes, it can be dynamic: fields array item mast have title attrib.

<table ng-table-dynamic="tableParams with columns" show-filter="false" class="table table-bordered table-striped">
    <tbody>
      <tr ng-repeat="user in $data">
        <td ng-repeat="col in $columns">{{user[col.field]}}</td>
      </tr>
    </tbody>
  </table>

i've edited for you old example that was on ngTable's old site.

you shoud use this example - Updated Example 20: Dynamic columns

Solution courtesy of: voznik

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.