AngularJS创建动态模板

Question

I´m currently trying to create some kind of dynamic template, which fetches data and meta information from two separate services. The final result should be an table showing the data with the correct labels. My plan was to create HTML -templates with different basic designs like a table with 3,4 or 5 columns. Then a matching controller should fetch the meta data from a service which should return an array with the id of an attribute and its name which should be displayed in the table. So far so good but now comes the tricky part:
The second service fetches the matching data for the template and the id of the meta data and the id of the actual data matches, so that you can match them correctly.

Here is the Code on plunkr: Link

The Main problem is the following piece of code:

<tr ng-repeat="person in persons">
   <td>{{person.name}}</td> 
   <td>{{person.age}}</td>
   <td>{{person.postal}}</td>
</tr>  

In between the <td> -tags the data doesn´t get fetched dynamic but static. I don´t want to explicitly say how my attributes are called but use the fetched data from the meta service to know how my attributes are called. So in the end the template should get the names of the attributes as well as the matching data. Do you guys have any good idea for me how to solve this?

EDIT
To make things a little more clear:
At the moment the data between the <td> tags is fetched static because the term {{person.name}} stands there hard coded. Let´s assume that the structure of the data chenges and there will be a country -attribute instead of the postal one. The template which stays the same still tries to get data from person.postal and not from person.country . So undefined or even an error would be the consequence.
To prevent this the names of the attributes should get fetched from a meta service and build in the HTML page.

The workflow should look somehow like this:

1. fetch the metadata --> get the names of the attributes
2. Set the names of the attributes inside the 'HTML' to call the correct attribute
3. fetch the actual data with the attributes defined before
4. Create the table

Answer 1

http://jsfiddle.net/Lt024p9h/1/

<div ng-controller="MyCtrl">
  <table border="1">
    <tr ng-repeat="person in persons">
       <td ng-repeat="attr in query.attribs">
         {{person[attr.id]}}
       </td>
    </tr>  
  </table>
</div>

Right so what is going on here?

So going by your fiddle, what we do if get the attributes you wish to display then using the object as an associative array .

This does require that the attr.id and the properties match up.