AngularJS create dynamic template

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:

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

what exactly do you mean by this: "In between the <td>-tags the data doesn´t get fetched dynamic but static"? — Mridul Kashyap
– Mridul Kashyap, Commented Aug 9, 2016 at 13:23
@AnmolMittal I fixed the code. Also described my problem a little more — JohnDizzle
– JohnDizzle, Commented Aug 9, 2016 at 13:34

deadwards · Accepted Answer · 2016-08-09 13:41:26Z

2

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.

edited Aug 9, 2016 at 13:41

answered Aug 9, 2016 at 13:34

deadwards

2,1381 gold badge16 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

AngularJS create dynamic template

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