Ng-repeat in table column

Question

So, I have a List that I am returning from the recreation service. Now I want to display this object in column format and now in the first row. So it would be something like this:

firstName: Bob Alice LastName: Doe Joe EmailId: [e-mail] [e-mail] ContactNo: 123123 12444 

So how can I use ng-repeat here:

  <tr> <th>firstName:</th> <td>('Name should be displayed here')</td> </tr> 

Answer 1

You can use ng-repeat for the td element.

 <tr> <th>firstName:</th> <td ng-repeat="person in people">{{person.firstName}}</td> </tr> <tr> <td ng-repeat="person in people">{{person.lastName}}</td> </tr> 

Answer 2

If you declare the keys of the objects you are executing, you can nest your ng-repeats so that you do not need to declare each line again and again. Do the following and nest them instead:

In an Angular app:

 /*for the data*/ var personKeys = ['firstName', 'LastName', 'EmailID', 'ContactNo']; var people = [ { firstName: 'Bob', LastName: 'Doe', EmailID: ' [e-mail] ', ContactNo: 123123 }, /* etc */ ]; /*don't forget to reference this in your controller with something like: */ this.pKeys = personKeys; this.people = people; 

In your HTML:

 <table ng-controller='MyController as personList'> <tr ng-repeat='key in personList.pKeys'> <th>{{key}}</th> <td ng-repeat='person in personList.people'> {{person[key]}} </td> </tr> </table> 

This problem still has a problem with iteration of each person | attributes | times, not just once. I'm sure there is a smart way to just repeat once, memoize and compose a table without going through the entire data set many times, so that the runtime does not grow as fast as you expand your data.