<li ng-repeat="address in search.result.addresses">
<a href ng-click="selectAddress(address)">
{{address.addressLines}}
</a>
</li>
The problem is with my {{address.addressLines}}
This is currently a string array so my value on screen is printed out like
["address1","address2","address3","address4"]
But I just want it printed like
address1,address2,address3,address4
There are fundamentally 2 ways:
1) By using native angular directives:
<span ng-init="foo=[1,2,3,4]" ng-app="app">
<span ng-repeat="f in foo">{{f}}<span ng-if="!$last">,</span></span>
</span>
2) By writing a simple filter (best way):
angular.module('app', []).filter('arrayToList', function(){
return function(arr) {
return arr.join(',');
}
});
<p>{{foo|arrayToList}}</p>
This is the working example on jsfiddle: http://jsfiddle.net/g0dmazzk/
You can do this using join also :
<li ng-repeat="address in search.result.addresses">
<a href ng-click="selectAddress(address)">
{{address.addressLines.join()}}
</a>
</li>
I thing somthing like this would work...
<li ng-repeat="address in search.result.addresses">
<a href ng-click="selectAddress(address)">
<span ng-repeat="a in address.addressLines"> {{a}},</span>
</a>
</li>
To avoid dealing with the comma in the last item on the list, I used a class (label from Bootstrap) like this:
<span ng-repeat="a in address.addressLines" class="label label-default"> {{ a }} </span>
Related
hey im trying to get the id value from *ngFor loop into a method in my component in order to delete a specific object
my code looks like that:
html:
<tr *ngFor="let c of myCompanyArray">
<td>{{c.id}}</td>
<td>{{c.companyName}}</td>
<td>{{c.password}}</td>
<td>{{c.email}}</td>
<td>
<a href="" class="tooltip">
<i class="fas fa-user-edit"></i>
<span class="tooltiptext">edit company</span>
</a>
</td>
<td>
<a class="tooltip" >
<i class="far fa-trash-alt" (click)="sendIdForDelete({{c.id}})"></i>
<span class="tooltiptext">delete company</span>
</a>
</td>
</tr>
Component:
sendIdForDelete(compid){
console.log("company id is : " + compid.value);
///this.dataService.deleteCompany(compid.value);
}
what ever syntax i tried inside (click)="sendIdForDelete({{c.id}}) or (click)="sendIdForDelete(c.id)" i always get undefined
really appreciate your help thanks
You should call sendIdForDelete(c.id) in you'r html and change you'r method in you'r component like below
sendIdForDelete(compid: number){
console.log("company id is : " + compid);
}
In this case you are passing id ( which is number or string ) to you'r component (.ts file ) and you'r function (sendIdForDelete) should get just an id.
Now you can do anything with the corresponding id in function.
You should not use interpolation in your template, just do without {{}},
<i class="far fa-trash-alt" (click)="sendIdForDelete(c.id)"></i>
and inside TS do not use value, because you are already passing a number,
sendIdForDelete(compid:any){
console.log("company id is : " + compid);
}
I have a todo list and I want to show each item in a "li" tag. And in this tag, i also want to add a link X to be able to delete the item. But I got an error:
org.xml.sax.SAXParseException: The value of attribute "th:text" associated with an element type "li" must not contain the '<' character.
Here is the code that got the error:
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text} + <a href='#' class='close' aria-hidden='true'>×</a>" th:attr="data-value=${todoitem.id}" ></li>
I also tried like this, also did not work:
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>×</a></li>
The code that I am trying to generate is like this:
<li data-value="0">text of todo list ×</li>
So how can I make a loop that can also add the link into the li tag?
One option is to use a <span> to render the text.
So from your second attempt, i.e.
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>×</a></li>
move the th:text into a new <span>
<li th:each="todoitem : ${todolist}" th:attr="data-value=${todoitem.id}">
<span th:text="${todoitem.text}" th:remove="tag"></span>
<a href='#' class='close' aria-hidden='true'>×</a>
</li>
You could also use th:inline="text" as explained here.
webdriver finding xpath its too dificult for me. i used fire path most of fire path given xpath not working and its too lengthy. some one give me idea about xpath will work all conditions and i know relative xpath
some times this posibilities also not working like {//ul[#class='review-nav']}. some one help me for find xpath that xpath will work all conditions
<ul class="review-nav">
<li id="pend" class="pend tabclass">
<a onclick="OnTabSelect(1,'pend',0)" href="#">Pending (197)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="flag" class="flag tabclass active">
<a onclick="OnTabSelect(4,'flag',1)" href="#">Flagged (96)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="esca" class="esca tabclass">
<a onclick="OnTabSelect(5,'esca',2)" href="#">Escalated (88)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="closed" class="closed tabclass">
<a onclick="OnTabSelect(3,'closed',3)" href="#">Closed (99)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
<li id="all" class="all tabclass">
<a onclick="OnTabSelect(0,'all',3)" href="#">All (1,355)</a>
<span class="glyphicon glyphicon-filter filterclass" style="color:#185daa;top:4px;display:none"/>
</li>
</ul>
I try this Xpath to read above list its not working
xpath = //ul[#class='review-nav']
Sorry for that, I am little bit not clear for what you need xpath..
If you are trying to get all link ('a') to collect into List
//ul[#class='review-nav']/li/a
If you are trying to get all 'span' element to collect into List
//ul[#class='review-nav']/li/span
If you want to get specific element in specific li, you can try with id of 'li', for example if you like to find xpath of 'a' in first li
//li[#id='pend']/a
Thank You
Try with CSS:
.tabclass
You should get the 'li' elements with this.
I am writing ASPNET MVC and I would like to use Html.ActionLink
I want however that the final HTML will look like this
from:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
to:
<li>
<a href="layout-variants.html">
<i class="linecons-desktop"></i>
<span class="title">Home</span>
</a>
</li>
How can I transform
You should make use of Url.Action()
<li>
<a href="#Url.Action("Index","Home")">
<i class="linecons-desktop"></i>
<span class="title">Home</span>
</a>
</li>
Url.Action("Index","Home") is the way around it.
See the demo
public static string ActionLink(this HtmlHelper html, string url)
{
return "<i class=\"linecons-desktop\"></i><span class=\"title\">Home</span>"
}
Call from view: #Html.ActionLink("layout-variants.html"), you can change parameter for your project.
<ul class="navigation">
<li>
<a class="trg-login" href="#">
<i class="icon-dashboard"></i>Login
</a>
Above is my code so how to access the class element in the watir .
Based on the docs, it looks like you'd do this:
myEl = browser.link(:class, "trg-login")
This should select you first element by class in this case selecting class 'navigation'
browser.uls(:class => "navigation")[0]