AngularJS create dynamic template - javascript

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

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.

Related

Angularjs Table data biding

JSFiddle here
<tr ng-repeat="item in schedule.days[0].entries" scope="row">
<th>{{item.name}}</td>
<td ng-repeat="x in schedule.days.entries">{{x.value}}</td>
</tr>
I am trying to create a dynamic table in angularjs. I got to a point where I am able to display the name and table row but in table data I am not able to bind the value object property. Can someone please guide me what I am doing wrong on my ng repeat. I have been stuck on this for two days now some guidence would be really appreciated. Thank you
You're trying to access schedule.days.entries, but days is an array, not an object. You're missing the index, e.g.
<td ng-repeat="x in schedule.days[0].entries">{{x.value}}</td>
https://jsfiddle.net/0xsv2aq3/
Edit:
I was just showing how to access the values. If you want to take the values for the same name in different days and show it in the table, you can do something like this.
https://jsfiddle.net/bray3gmd/

Can't present full JSON (ng-repeat) AngularJS

Try to present all data with ng-repeat from web service.
This is my controller JS (GetAllCtrl.js):
I get JSON data:
Now I want to get only company data without coupons data
(Company structure in JSON is: compName, id, email, coupons[])
In GetAllCtrl.js I have put the data in allComp variable.
This is GetAllCtrl.html:
I do ng-repeat in tr tag and use $index for loop on the array with data.
But in output, I get only 2 companies instead 4.
In clonsole.log I see 4 objects.
I'm new in AngularJS and JS and can't understand why it happened.
You are iterating over the wrong variable. It should be ng-repeat="c in getAllCtrl.allComp.data" and correspondingly change your td elements.
<tr ng-repeat="c in getAllCtrl.allComp.data track by $index">
<td align="center"><b>c.compName</b></td>
<td align="center"><b>c.id</b></td>
<td align="center"><b>c.email</b></td>
</tr>

JQuery accessing text deep below unique id

I'm trying to make an app that pulls our data from our existing website. As we have no known API, I have decided to use ajax with whateverorigin.org to pull the full HTML from our site, and parse it with jQuery from there.
Unfortunately, much of the data I need lies far below any unique ID's. With $(data.contents).find("#unique").text() I am able to retrieve data of the type:
<div id="unique">
<div>
Text I want
</div>
</div>
However, as the nesting gets deeper, like:
<span id="unique2">
<table>
<tbody>
<tr>
<td>
Text I want
that snippet always returns "".
I have tried chaining the levels together with .join, but that doesn't work either.
Code in context here, around line 40-50. The site I'm trying to access is wmbr.org. The id that works is #now_on_the_air, one of the id's that doesn't is #recent_plays. The log is empty.

Angular JS Directive

I need create a directive in Angular JS to paginate a list of objects. But, I want have the control over how the list will be looks like. Something like that, like JSF dataTable componente:
<ng-page list="lista" var="item">
<!-- this part keeps in original document -->
item.name + item.value
<!-- controllers to navigate between the pages, this part is in a template -->
</ng-page>
So the ideia is create a template of pagination, but how the data will be displayed keeps in the document where the table really are. I don't know if I make me understand.

How to view the dynamically added fields in Angular.JS?

Please check this:
http://plnkr.co/edit/61JgnU?p=preview
If you start filling the fields you will see the fields been printed. Which is fine.
Now if you press the Add Input then bunch of fields will be added.
I need to add the newly added fields value to be printed under the main fields. (Please let me know if you need more explanation.)
Here is how I need it to be for the newly added fields:
I don't know how to show the fields without needing to make another $scope.fields array.
One more thing, in the $socpe.fields array there are more than 20 different fields, I just put what it needed for this question.
Thanks.
My recommendation would be to loop through your inputs array with the same markup you used for the users. The following seems to work if I understand what you're looking for.
<div ng-repeat="input in inputs">
<table class="table table-bordered">
<tr ng-repeat="field in fields | orderBy: 'index'" ng-show="input[field.id]">
<td class="col-md-4"><b>{{field.name}}</b>
</td>
<td class="col-md-7">{{input[field.id]}}</td>
</tr>
</table>
</div>
Another option you might want to consider is a custom directive taking the fields array and the display array as parameters.

Categories