element in span with ng-bind not displayed - html

Here my problem.
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
In my controller, getToolTip() returns a string and same for getIcone().
The second span is never displayed and not present in the DOM.
But if i replace by this :
<span class="col-sm-3 col-md-3" >
{{controller.getToolTip()}}
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
This time i can see my second span. Do you have an idea what is the problem

ng-bind-template directive replaces the element's content with the interpolation of the template in the ngBindTemplate attribute.
Read more here: https://docs.angularjs.org/api/ng/directive/ngBindTemplate
There is also a syntax error in the sample template. Quotes don't close and curly braces are needed in that case, like this:
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">

Related

Does typer.js allow ascii characters?

Comma is used as the delimiter in typer.js. I am trying to use the ascii code of , for a comma but to no avail.. A blank space appears.
Codepen: https://codepen.io/straversi/pen/yrLvmw
<h1>
It was <span
class="typer"
id="some-id"
data-words="dark,,stormy,,night,"
data-delay="100"
data-colors="#08605F,#177E89,purple">
</span>
<span style="font-size:1.2em;vertical-align:middle;" class="cursor" data-cursorDisplay="|" data-owner="some-id"></span>
</h1>
<button class="typer-stop" data-owner="some-id">Stop</button>
<button class="typer-start" data-owner="some-id">Start</button>
This will print a comma.. you need to encode it :)
<h1>
It was <span
class="typer"
id="some-id"
data-words="&#44;.,dark.,stormy.,night."
data-delay="100"
data-colors="#08605F,#177E89,purple">
</span>
<span style="font-size:1.2em;vertical-align:middle;" class="cursor" data-cursorDisplay="|" data-owner="some-id"></span>
</h1>
<button class="typer-stop" data-owner="some-id">Stop</button>
<button class="typer-start" data-owner="some-id">Start</button>
A comma encoded: &#44;
Some common symbols as encoded: HTML Entities
Read this: Is it possible to print a HTML entity in JS or PHP?
Let me know how you get on!

How to get the text inside a span tag which is inside another tag using beautifulsoup?

How do I get the value of all the tags that have class="no-wrap text-right circulating-supply"? What I used was:
text=[ ]
text=(soup.find_all(class_="no-wrap text-right circulating-supply"))
Output of text[0]:
'\n\n17,210,662\nBTC\n'
I just want to extract the numeric value.
Example of one instance:
<td class="no-wrap text-right circulating-supply" data-sort="17210662.0">
<span data-supply="17210662.0">
<span data-supply-container="">
17,210,662
</span>
<span class="hidden-xs">
BTC
</span>
</span>
</td>
Thanks.
In case all elements have similar HTML structure try below to get required output:
texts = [node.text.strip().split('\n')[0] for node in soup.find_all(class_="no-wrap text-right circulating-supply")]
This might look like an overkill , You could use use regex to extract numbers
from bs4 import BeautifulSoup
html = """<td class="no-wrap text-right circulating-supply" data-sort="17210662.0">
<span data-supply="17210662.0">
<span data-supply-container="">
17,210,662
</span>
<span class="hidden-xs">
BTC
</span>
</span>
</td>"""
import re
soup = BeautifulSoup(html,'html.parser')
coin_value = [re.findall('(\d+)', node.text.replace(',','')) for node in soup.find_all(class_="no-wrap text-right circulating-supply")]
print coin_value
prints
[[u'17210662']]

Delete the first word in a "contentEditable" element will break Angular 6 NgFor Binding

<div
class="transcript-snippet__content__body__sentance"
[contentEditable]="true">
<span *ngFor="let word of words; let i = index;"
class="transcript-snippet__content__body__word">{{word.displayWord}}</span>
</div>
By using the above template, the HTML is generated as :
<div _ngcontent-c18=""
class="transcript-snippet__content__body__sentance ng-star-inserted"
contenteditable="true">
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object",
"ng-reflect-ng-for-track-by": "function (index, word) {\n "
}-->
<span _ngcontent-c18=""
class="transcript-snippet__content__body__word ng-star-inserted"
key="0">Hello </span>
<span _ngcontent-c18=""
class="transcript-snippet__content__body__word ng-star-inserted"
key="1">World </span>
<span _ngcontent-c18=""
class="transcript-snippet__content__body__word ng-star-inserted"
key="2">ContentEditable</span>
<span _ngcontent-c18=""
class="transcript-snippet__content__body__word ng-star-inserted"
key="3">.</span>
</div>
If I delete|cut the first character 'H' in 'Hello', the <!--bindings ... --> will be removed. All following Template logic will be blocked.
Is there a way to work around it? Can we prevent breaking the binding?
In the contentEditable element, if we try to delete the first 'Span' element, edit the first 'Span' element with empty spaces, or overwrite the whole 'Span' element (such as the paste), the tags may be deleted. Then the Angular Logic breaks.

Swap Follow/Following button based on whether or not the user Follows the individual

I am trying to swap the Follow/Following button depending on whether or not the currentuser is following the other individual. In my code I have and NgIF set up and the thing i am having difficulty with is checking for the value in the array. If just one users name is in the the code works for that user. However if the array has multiple indexes the code turns the value to false.
HTML:
<div *ngFor="let pic of pics">
<span *ngIf="pic.user!=current">
<span *ngIf="pic.user!=cFollows">
<button ion-button>Follow</button>
</span>
<span *ngIf="pic.user==cFollows">
<button ion-button>Following</button>
</span>
My TS File(all of the data in pics is in JSON:
pics = []
cFollows = ["user1","user2"]
So basically if the string value of pic.user is equal to any string in the array show the following button. If it is not show the follow button.
So i figured out i need to change the code to match below
<span *ngIf="pic.user!=current">
<span *ngIf="cFollows.indexOf(pic.user)==-1">
<button ion-button>Follow</button>
</span>
<span *ngIf="cFollows.indexOf(pic.user)!=-1">
<button ion-button>Following</button>
</span>
</span>

XPath to select link containing text?

I tried to use this XPath:
//*[contains(normalize-space(text()),'Jira')]
Also tried:
//*[contains(text(),'Jira')]
In the below HTML example, there is space before and after text "Jira". I am not able to click on the link:
<a href="#/crm/usergroup-edit?id=572a3c84e4b07f6189958700"
ng-repeat="gp in groups | filter : userGroupSearch | orderBy:'-name':1"
class="ng-scope">
<div class="inventoryPanel" ng-style="myStyle" style="width: 15.8%;">
<h4 class="ng-binding">
<div class="groupIcon G">
<div class="text ng-binding">P</div>
</div>Jira
</h4>
</div>
</a>
The following XPath will select all a elements whose string value contains a Jira substring:
//a[contains(.,'Jira')]