How to set dynamic data header in ngtable (angular plugin)

Question

I want to have a multi-language view with ngTable. To do this, I install in my controller $ scope.translate (valid json), which contains my traductions. In my opinion, I want to set my data name, for example {{translate.code}}, etc.

my opinion:

<table ng-table="tableParams" class="table ng-table-responsive"> <tr ng-repeat="product in $data"> <td data-title="'{{translate.code}}'" > <!-- display : {{translate.code}} --> {{product.code}} </td> <td data-title="['translate.reference']" > <!-- display : empty --> {{product.reference}} </td> <td data-title="'Label'" > {{product.label}} </td> <td data-title="'Size'" ng-show="manageSizeColor == true"> {{product.size}} </td> <td data-title="'Quantity'" > <ac-quantity minquantity="1" cquantity="product.quantity"></ac-quantity> </td> <td data-title="'Price'"> <b>{{product.price + currency}}</b> </td> </tr> </table> 

Answer 1

I finally found how to do this with this example: https://github.com/esvit/ng-table/issues/53

 <td data-title="translate['reference']" > {{product.reference}} </td> 

where translate is a scope variable and ['reference'] is a property

Answer 2

If you use angularjs ~1.2 with angular-translate ~2.6.1 , translating to data-title works like this:

 <td data-title="'MY_TRANSLATION_ID' | translate" > {{product.reference}} </td> 

Answer 3

You can also do this:

 <td data-title="getColumnName('your.translate.code')">{{ resultat.number }}</td> 

with your controller:

 $scope.getColumnName = function(column) { return $translate.instant(column); }