Treating output from a database as HTML code within angular - javascript

I'm creating a front end application which looks at a database of Hearthstone cards allowing you to sort and search them. However, the Text displayed on the cards (Within the database) has HTML formatting within it such as <b> </b>
EG:
The card "Toxic Arrow" has a text field containing:
Deal $2 damage to a minion. If it survives, give it <b>Poisonous</b>.
currently the rendering function looks as follows:
`<tr *ngFor = "let card of cards">
<td> {{card.text}} </td>
<td> <img [src] = 'card.img'
[title] = 'card.name'
[style.width.px] = ImageWidth> </td>
</tr> `
and currently the output within the table shows this:
Deal $2 damage to a minion. If it survives, give it <b>Poisonous</b>.
I'm looking for a way to format this text quickly inside this loop to remove the $ and use the already existing HTML <b> tag
I'm not using the older AngularJs, I'm using the most current up to date version of Angular.

You can replace the first <td> in your code with <td [innerHTML]="card.text"> </td>.
This will cause the text to be displayed with HTML formatting as per the tags present in the input string.

Related

AngularJS create dynamic template

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.

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.

Using CSS or Java to Show or Hide Empty Content Area

I am trying to create a page template that uses section headers and subsequent content that is being dynamically pulled in based on a separate database. Currently I have the page set up to look something like this:
<tr>
<td>
<h3>Product Applications</h3>
{tag_applications}<br />
</td>
</tr>
Where the Product Applications is a formatted header on the page and the {tag_applications} is link through the CMS that is pulling in content from a field defined elsewhere. I am trying to figure out how to hide the entire cell (or div if I need to) with either CSS or a script when the {tag_applications} is empty or blank. I tried to use the 'empty' tag in CSS on the cell and setting the display to hidden, but of course, the cell is not actually empty because of the header.
What is the best way that I can accomplish this without creating separate pages for each item?
Thanks!
Try wrapping your content area in a div, like this:
<tr>
<td>
<h3>Product Applications</h3>
<div class="contentSection">{tag_applications}</div>
</td>
</tr>
Then your script can check if the div is empty or not. (uses jQuery)
$(function()
{
$(".contentSection").each(function(idx, ele)
{
if($(ele).html() == "")
$(ele).parent().hide();
});
});
My apologies if I made any syntax errors...

Is it possible to highlight multiple rows of a single column in a multi-column HTML table?

For purposes that are very central to my apps purpose, I display text content in an HTML table in a UIWebView. Here is an example of what that HTML looks like:
<table width = "100%">
<tbody>
<tr>//Row 1
<td>
<div id = "guid">
Here is the text of the first row, first cell in the table
</div>
</td>
<td>
<div id = "guid">
Here is the text of the first row, second cell in the row
</div>
</td>
</tr>
<tr>//Row 2
<td>
<div id = "guid">
Here is the text of the second row, first cell in the row
</div>
</td>
<td>
<div id = "guid">
Here is the text of the second row, second cell in the row
</div>
</td>
</tr>
</tbody>
</table>
Again, it might not seem like I need to use a table, but it is essential to other functionality of the app - more s can be added to the same row.
I am trying to add a highlight tool to my app, and am running into some issues due to the fact that I am working with a table. Here is an example of the type of selection I am trying to make (same structure, different content):
Once the selection is made, it is quite easy to set a highlight to the text using execCommand. Quite easy if there is only one column of data that is. Take a look at what happens when I try and highlight the selection I made above:
It highlights the cell from the other column! The reason I am using a table is that I need to make sure that each block of text in the row (within the tr/td tags) starts at the same time, even though they could have varying heights, and one could be longer than the other and make the row taller as a result. This approach ensures unity at the row level.
Anybody have any ideas what I could do to fix this?

HTML+CSS+Javascript framework for printable HTML forms?

I need to prepare some forms for a football tournament. Simple stuff: tables and rules and some text labels. At first I launched a DTP app to create a printable PDF form, but then I realized I would rather do the thing in HTML, CSS, and Javascript.
Is there a printable-form-oriented framework that would let me typeset a form, then optionally let the users fill in some text and print the whole thing, client-side?
Please note that I’m not after the regular interactive HTML forms designed to be submitted to some backend service. I want something that emulates the old-school paper forms and, for optional bonus points, would let the users enter some text data before printing.
To give an example, a source like this:
<h1>Player List</h1>
<div class="field" data-label="Team Name" class="right"></div>
<table data-rows="5">
<thead>
<tr>
<th>number</th>
<th>name</th>
</tr>
</thead>
</table>
…could be rendered as:
PLAYER LIST _______________
Team Name
number | name
-------+----------
|
-------+----------
|
-------+----------
|
-------+----------
|
-------+----------
|
-------+----------
And the fields would be clickable and I could fill in the text before printing. (Again, client-side, no server.)
Bootstrap can help you creating a nicely looking form quickly.
You can optionally use other frameworks like Backbone, Angular, Knockout or Ember to actually save the data somewhere. But is seems like you don't need it.

Categories