<img [src]=post.$value.split("|")[2]>
I want to bind the value post.$value.split("|")[2] to an image source. It is simply a string that comes from another string I have split. I want to avoid looping through another array since I have
*ngFor = 'let post of posts | async'
As the ngFor statement that loops over my elements and that is a FirebaseListObservable which I would like to avoid to mess with and keep like it is. For some reason html doesn't recognize the square brackets in the expression. What do I do, Angular won't recognize it using either the input [] syntax or the {{}}syntax.
You should surround your expression with quotes :
<img [src]="post.$value.split('|')[2]">
Related
I have an HTML array with data like so:
data-groups='["category_all", "data goes here"]'
I have a prop called "title" which contains the string I need to render in the "data goes here" area. I've tried using v-bind, but then I lose the array which I need to have in order for the original sort feature to work.
I google'd a few different ways to either escape or render quotes, and most refer to v-bind which again, won't work in this instance.
Any help would be appreciated :)
I was using Shuffle.js and for anyone else seeking an answer, it was in the documentation:
https://vestride.github.io/Shuffle/docs/getting-started
Alternatively, you can set the delimiter option to a comma (delimiter: ',') and the data-groups attribute will be split on that character.
Then changing the above line of code to:
:data-groups="item.category.title + ',all'"
works just fine :)
I have a string variable that contain HTML code and I want it to render instead of displaying it as text. I tried different Pug configurations :
If the variable content contains the string #something :
p(style="white-space: pre-line")
| #{content}
displays the string as text and doesn't render it,
p(style="white-space: pre-line")
#{content}
display this : <#something>#something> with the first #something being clickable,
p(style="white-space: pre-line")
#[content]
and this returns an error.
Is there a possible way to do this ? Thanks !
Simply replace the hash of #{content} with an exclamation mark: !{content}. This is called unescaped string interpolation and should render your content without escaping HTML tags:
p(style="white-space: pre-line")
| !{content}
I am getting a JSON using AJAX in AngularJS. One of the attributes in the object (say, sample), has a string "<b>String</b>".
I populate this into a table as follows:
<td>{{item.sample}} </td>
This gives an output: <b>String</b> on the webpage, when I was actually trying to display String.
Since it is a JSON string, what is currently happening makes sense. How do I use this string and somehow evaluate it so that I see the bold string on the webpage?
Use ngBindHtml directive to render your text.
<td ng-bind-html="item.sample"></td>
Using regular expressions, I need to extract a multiline content of a tag, which has specific id value. How can I do this?
This is what I currently have:
<div(.|\n)*?id="${value}"(.|\n)*?>(.|\n)*?<\/div>
The problem with this is this sample:
<div id="1">test</div><div id="2">test</div>
If I want to replace id="2" using this regexp (with ${value} = 2), the whole string would get matched. This is because from the tag opening to closing I match everything until id is found, which is wrong.
How can I do this?
A fairly simple way is to use
Raw: <div(?=\s)[^>]*?\sid="2"[^>]*?>([\S\s]*?)</div>
Delimited: /<div(?=\s)[^>]*?\sid="2"[^>]*?>([\S\s]*?)<\/div>/
Use the variable in place of 2.
The content will be in group 1.
Change (.|\n) to [^>] so it won't match the > that ends the tag. Then it can't match across different divs.
<div\b[^>]*\bid="${value}"[^>]*>.*?<\/div>
Also, instead of using (.|\n)* to match across multiple lines, use the s modifier to the regexp. This makes . match any character, including newlines.
However, using regular expressions to parse HTML is not very robust. You should use a DOM parser.
The web page I'm testing has a span with inner HTML having a numeric value that I want to extract. For example:
<span class="timeout" style="display:none">5000</span>
I tried using the nightwatch command getText(), but it only returns "displayable" text, which, in this case, is a null string. What is the proper way to access this data?
Figured it out myself. You can use getAttribute on "innerHTML" to get the value, e.g.,
browser.getAttribute(spanCSS,"innerHTML",function(r)
{ console.log("span's innerHTML is " + r.value)
})
Wonder if there is a list of these "reserved" attribute names somewhere.