Dynamic template values in angular.js ng:repeat iteration

Question

I want to create a HTML table that uses a (dynamic) column model from the controller to render object properties depending on this column model. I need the ability to change the order of the table columns that's we it's defined in the controller.

Here's an example:

myapp.controller('controller', function ($scope, $http) {
   // List of objects
  $scope.list = [
    { a : 1, b : 2, c : 3},
    { a : 2, b : 3, c : 4},
    { a : 3, b : 4, c : 5}
  ];
  // Properties to be displayed
  $scope.fields = [ "c", "b", "a" ];
});`

Template:

<table>
  <tr ng:repeat="item in list">
    <td ng:repeat="field in fields">
      {{item.<field>}}
    </td>
  </tr>
 </table>

So, item. should be something like item.[a|b|c] to render the value from either property a, b or c. But i got no clue how to get this condition working properly.

As i'm quite new to angular, i'm not sure if that's a good approach or if there is any other nice solution to render something like this.

tasseKATT · Accepted Answer · 2014-05-07 15:50:33Z

0

<table>
  <tr ng:repeat="item in list">
    <td ng:repeat="field in fields">
      {{ item[field] }}
    </td>
  </tr>
</table>

Demo: http://plnkr.co/edit/QTCDvCdIAP0ndB1jJDe7?p=preview

answered May 7, 2014 at 15:50

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic template values in angular.js ng:repeat iteration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related