Angularjs, two data in a single row in table

Question

I have a problem to implement table with thin width.

myData = { name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'}

I wanna table like belows.

<table>
    <tr>
       <td>name</td><td>Foo</td><td>age</td><td>11</td>
    </tr>
    <tr>
       <td>sex</td><td>M</td><td>weight</td><td>77</td>
    </tr>
    <tr>
       <td>height</td><td>77</td><td>hobby</td><td>gaming</td>
    </tr>
</table>

Is it possible to show data like this using ngRepeat and its built-in variable?

Possible duplicate of http://stackoverflow.com/questions/15362868/adding-rows-with-ng-repeat-and-nested-loop — Coder John, Aug 27 '14 at 13:23
In particular take a look at this answer: http://stackoverflow.com/a/17533596/373655 to the question John posted. You can use the `tbody` trick but you won't need a nested ng-repeat — rob, Aug 27 '14 at 13:38
Also you need to change your object as array of object otherwise it will sorted alphabetical and `name` won't be the first `td` item. — Rahil Wazir, Aug 27 '14 at 14:20

score 1 · Accepted Answer · answered Aug 27 '14 at 13:44

The question John posted would solve your problem but I think it would be less of a hack to use ng-repeat-start and ng-repeat-end e.g.:

<table>
    <tr ng-repeat-start="item in myData">
       <td>name</td><td>{{item.name}}</td><td>age</td><td>{{item.age}}</td>
    </tr>
    <tr>
       <td>sex</td><td>{{item.sex}}</td><td>weight</td><td>{{item.weight}}</td>
    </tr>
    <tr ng-repeat-end>
       <td>height</td><td>{{item.height}}</td><td>hobby</td><td>{{item.hobby}}</td>
    </tr>
</table>

score -1 · Answer 2 · edited Sep 02 '15 at 20:29

If you have yr myData like this :

myData = [{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'},{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'},{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'}]

Then Your table will be like this :

<table>
   <tr ng-repeat="row in myData">
      <td>{{row.name}}</td>
      <td>{{row.age}}</td>
      <td>{{row.sex}}</td>
      <td>{{row.weight}}</td>
      <td>{{row.height}}</td>
      <td>{{row.hobby}}</td>
   </tr>
</table>

Angularjs, two data in a single row in table

2 Answers2