1

So far I've only found examples that put the objects in the rows (1)(2)(3), but I need to put the objects in the columns and their attributes in the rows.

Example of JSON:

[
  {
    name: 'peanut butter',
    price: 0.99
  }
  {
    name: 'strawberry jelly',
    price: 0.99
  }
  {
    name: 'white bread',
    price: 2.99
  }
]

Example of desired table:

table that shows a row for name and a row for price, with peanut butter, strawberry jelly and white bread and their prices in the columns

Community
  • 1
  • 1
Friso
  • 2,328
  • 9
  • 36
  • 72
  • 1
    I guess you need to first check for all available attributes you got, and create a list based of this. Then do an ng-repeat on this list for the table-rows. Inside this do a second ng-repeat for the objects in the columns. **{{attr.name}}** - if you don't need a dynamic version, do like Konrad suggested in his answer, with a hardcoded list of rows. – Tobi Dec 19 '16 at 13:54
  • I'll try that when I need to build a reusable directive. Thanks for the tip! – Friso Dec 19 '16 at 14:39

1 Answers1

1

I think you want something like this.

Angular template:

<table>
  <tr>
    <th>Name</th>
    <th ng-repeat="item in yourList">{{ item.name }}</th> 
  </tr>
  <tr>
    <td>Price</td>
    <td ng-repeat="item in yourList">{{ item.price }}</td> 
  </tr>
</table>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
Konrad Klimczak
  • 1,474
  • 2
  • 22
  • 44