When I use the attribute th:attr everything is working.
But when I want to use th:onclick without th:attr, I have error.
What do I need to do to make it work well without th:attr?
<button th:each="user : ${users}"
th:if="(${user.id} == ${user.id})"
th:attr="onclick='changeUser(\''+ ${user.id} + '\', \''+ ${user.name} + '\');'">click on me</button>
I found that the problem is in Thymeleaf version.
Related
I'm confused. I'm trying to check in a loop if the outputted key is a mail key, if yes, I want to wrap the output into a <a> tag to make the email clickable. Somehow it's not working and it's printing the whole content inside the div:
<div>{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}</div>
Current result on the page:
{{contactInfo.key === 'mail_outline' ? '' + contactInfo.value + '' : contactInfo.value}}
I'm not sure if I understood the whole thing correctly. I'm coming from PHP and there I can do something like this. Can someone please explain me my issue?
If you surround the html elements inside the div with quotes like you did, you are telling angular that the divcontent is actually a text value. So it will end up displaying your condition as text.
You can add dynamic html by binding to innerHtml property like suggested, however I find it cleaner to keep display logic in the template using one of the options below. Besides, they will avoid the extra overhead of calling a function every round of change detection
*ngIf
<div >
<a *ngIf="contactInfo.key === 'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngIf="contactInfo.key !== 'mail_outline'">{{contactInfo.value}}</ng-container>
</div>
Or use *ngSwitch, which will be more adequate if you've got several different cases
<div [ngSwitch]="contactInfo.key">
<a *ngSwitchCase="'mail_outline'" href="{{contactInfo.value}}">{{contactInfo.value}}</a>
<ng-container *ngSwitchDefault>{{contactInfo.value}}</ng-container>
</div>
Use angular Html binding. Update your html
<div [innerHtml]="getLink()"></div>
In your typescript
getLink(){
if(this.contactInfo.key === 'mail_outline')
{
return `<a href='${this.contactInfo.value}'>${this.contactInfo.value}</a>`;
}
else
{
return this.contactInfo.value;
}
}
Thanks.
Is there a way to add a value into my title attribute inside my Dropdown tag. For example I want to get title='Lead' + {this.state.candidate.length}. I am also using Dropdown from 'rsuite'.
<Sidenav className="nav1-full" defaultOpenKeys={['1']} activeKey="1">
<Sidenav.Body>
<Nav className="nav-bar">
<Dropdown className="nav1-body" eventKey="1" title="Lead">
<Dropdown.Item eventKey="1-1" href="/candidates/1">
Exploratory
</Dropdown.Item>
<Dropdown.Item eventKey="1-2" href="/candidates/2">
Phone Intro
</Dropdown.Item>
</Dropdown>
</Nav>
</Sidenav.Body>
</Sidenav>
Since anything inside {} is an inline JSX expression, you can do:
title={"Lead" + this.state.candidate.length}
You can also use ES6 string interpolation/template literals with `` (backticks) and ${expr} , like this:
title={`Lead${this.state.candidate.length}`}
Hope it helps.
You need to wrap your prop in brackets {} instead of quotes
In the brackets you can write any javascript code:
<Dropdown title={'Lead ' + this.state.candidate.length}>
ES6 way:
<Dropdown title={`Lead${his.state.candidate.length}`}>
title={`Lead${this.state.candidate.length}`}
Should do the trick
Try this. Simple template string solution.
title={`WhateverYouWantHere`}
I have a string with lots of " which i replace with an empty String and this works.
But I also want to make a line break when a comma appears.
Already tried it with ('\n'), ('\r'), ('<br>'), ('<br/>') but nothing works.
in my angular controller I have the string
self.msg = msg.replace(/"/gi, '').replace(/,/gi, '\n');
self.testAlerts = [{ type: 'success', msg: self.msg}];
I want to show this message in the alert box in my html
<div uib-alert ng-repeat="alert in testAlerts" type="{{alert.type}}" >{{alert.msg}}</div>
Why do the line breaks not work?
Use ng-bind-html instead of interpolation:
<div uib-alert ng-repeat="alert in testAlerts" type="{{alert.type}}" ng-bind-html="alert.msg"></div>
Here's a plunkr for demonstration.
If anybody from Angular world is happen to be here you can use
[innerHTML] instead of [ng-bind-html] from #RamblinRose's answer
Or even, just add css white-space class
<div uib-alert ng-repeat="alert in testAlerts" style="white-space: pre-line;" type="{{alert.type}}" >{{alert.msg}}</div>
I have the following string value generated in the controller.
cc.lstchat = "Reply the Number with your question... <br />";
foreach (clsChat item in lstchat)
{
cc.lstchat =cc.lstchat + item.DisplayNumber+". " + item.ChatItem+" <br/> ";
}
Now i'm trying to display above string value inside a div tag in my view but it does not render the line breaks.
<div id="divChat" style="width:400px;height:300px;border:double">
#Model.lstchat.ToString()
</div>
Try the #Html.Raw method
#Html.Raw(Model.lstchat)
Use Html.Raw() it is used to render any string as HTML.
`#Html.Raw("input data in here is rendered as HTML only")`
please please be careful with #Html.Raw() because of HTML injection (eg my comment will be <script>...</script> test - that an XSS right away. If you just want line breaks - consider this answer:
#Html.Raw(Html.Encode(Model.CommentText).Replace("\n", "<br />"))
I have dynamic HTML attributes generated using Razor.
Everything seems to work fine except when I generate an attribute value with a whitespace within like:
item.Name = "Organisation Structure";
When I then try to render this value in a dynamic attribute, Razor thinks that the text after the whitespace is another entirely different attribute.
<a href="#item.Url" #(!item.HasSubItems ? "data-tab-title=" + item.Name : "")></a>
Which renders wrongly as:
instead of like this:
I have even tried to use Html.Encode(item.Name) like below:
<a href="#item.Url" #(!item.HasSubItems ? "data-tab-title=" + Html.Encode(item.Name) : "")></a>
Please, any solutions to this problem will be highly appreciated.
I solved the problem by simply doing a String.Replace(""," ")
<a #(!item.HasSubItems ? "data-tab-title=" + item.Name.Replace(" "," ") : "") href="#item.Url" ></a>
This solved the problem rather nicely.
You could try :
#{
var dynamicLink = string.Format("<a href='{0}' {1}></a>", item.Url, (!item.HasSubItems)? "data-tab-title='" + item.Name +"'" : "");
}
#Html.Raw(dynamicLink)