I am currently working on creating a responsive table using AngularJS.
To demonstrate what I am trying to achieve, I have put together an example in this fiddle: 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 code snippet illustrates my approach. I aim to dynamically populate the data title by fetching values from $scope.titles. As someone new to Angular and front-end development, I wonder if there is a more efficient method to accomplish this task?
For styling purposes, I am utilizing angular-responsive-tables from this repository: https://github.com/awerlang/angular-responsive-tables.