Responsive table using Angular and angular-responsive-tables

Question

I'm trying to make a responsive table using AngularJS.

I created a fiddle showing what I want to do: https://jsfiddle.net/loredano/xnyzaLnu/1/

<tr ng-repeat="product in products" >
    <td data-title='{{titles.col1}}'>{{product.id}}</td>
    <td data-title='{{titles.col2}}'>{{product.name}}</td>
    <td data-title='{{titles.col3}}'>{{product.col3}}</td>
    <td data-title='{{titles.col4}}'>{{product.col4}}</td>
    <td data-title='{{titles.col5}}'>{{product.col5}}</td>
</tr>

This is more or less what I'm trying to do. I want to be able to populate the data-title getting the data from my $scope.titles. I'm new with Angular and with front-end programming. Is there another way I could accomplish it?

I'm using this angular-responsive-tables https://github.com/awerlang/angular-responsive-tables to do the css "trick".

Answer 1

The only problem you have in your fiddle for your approach to work is that your $scope.titles is an array, not an object. If you want it to work, just remove the square brackets.

$scope.titles = {
  col1: "Id", 
  col2: "Name", 
  col3: "Something", 
  col4: "Something else", 
  col5: "Something something"
};

fiddle: https://jsfiddle.net/xnyzaLnu/2/