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.
Related
I'm currently running into a problem where I am trying to make a li tag have specific classes based on a Ruby variable by using a ternary operator:
<li class=<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>>
...
</li>
I expect the results to be an li element with both the nav-item and active classes if #ruby_var is true:
<li class="nav-item active">
...
</li>
However, for some reason, I am getting unexpected results where it only sets the class to the first part of the string that is in the ternary operator, and leaves the second part outside of the class tag:
<li class="nav-item" active>
...
</li>
I have tried using more than one space in my "nav-item active" string but any white space seems to make the class only accept the first elem in the string.
What is the proper way to use the ternary operator to set an HTML tag's classes?
You can write it like this
<li class="<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>">
# ...
</li>
Note the " outside of the erb expression.
Or you can use tag helper like this
<%= tag.li, class: ["nav-item", (:active if loc == #ruby_var)] do %>
# ...
<% end %>
I like the second option better because I prefer not to mix HTML and ERB when describing a tag.
I am not able to click on the link nestled inside a list tag.
Here is the HTML code:
<div class="sideBarContent" ng-include="'routes/sidebar/sidebar.tpl.html'">
<div id="innerSidebarContent" ng-controller="SidebarController">
<div>
<ul class="menuItems bounceInDown">
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/">
<li id="menuConfigurator" ui-sref="configurator" ng-click="closeMobileMenu()" href="/configurator/">
<span class="menuIcon regularImage blueHighlight activated icon-selectAndTailor"></span>
<span class="menuIcon icon-selectAndTailor_active activeImage">
<p class="mainMenuLabel multiLine">Select & Tailor Methods</p>
</li>
I tried all these ways to locate the text and click on it:
describe('Test objects in /configurator/ route', function() {
it('Click on select and tailor banner icon', function(){
//element(by.css('ul.menuItems > li[href=/configurator/]')).click();
//element(by.className('menuIcon icon-selectAndTailor_active activeImage')).click();
//element(by.css("li[#id='menuConfigurator' and #href='/configurator/']")).click();
//element(by.id('menuConfigurator')).click();
//element(by.xpath("//div[#class='sideBarContent']/p")).click();
//element(by.css("#menuConfigurator > p")).click();
//element(by.partialLinkText('Select & Tailor Methods')).click();
element(by.linkText("Select & Tailor Methods")).click();
console.log('in the configspec ...');
})});
Can someone help me resolve this?
Just had the same issue.
It turned out that wrapping the list in a < div > block was the problem.
Once the list was moved to be outside any < div > block the < a > tags worked.
li can not have href attribute
Use
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()"></li>
Or
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
Instead of
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
According to html this is not link.
Select it using other selectors:
element(by.className("multiLine")).click();
element(by.css(".mainMenuLabel.multiLine")).click();
element(by.css("[class='mainMenuLabel multiLine']")).click();
element(by.xpath(".//p[#class='mainMenuLabel multiLine']")).click();
how to select croissant (the one with class 'selected' ) to $scope.selected variable in angular ?
<ul id='ulsel' placement="top-left" style="max-height: 154px;">
<li value="Apple fritter" class="" tabindex="-1">Apple fritter</li>
<li value="Croissant" tabindex="-1" class="selected">Croissant</li>
<li value="Donut" tabindex="-1" class="">Donut</li>
<li value="Financier" tabindex="-1" class="">Financier</li>
<li value="Jello" tabindex="-1">Jello</li><li value="Madeleine" tabindex="-1">Madeleine</li>
<li value="Pound cake" tabindex="-1">Pound cake</li>
<li value="Pretzel" tabindex="-1">Pretzel</li>
<li value="Sfogliatelle" tabindex="-1">Sfogliatelle</li></ul>
Your markup is very strange, li's having values attributes and using a class as selected rather then a input is an unusually approach. Regardless you can use the below:
$scope.selected = $('#ulsel li.selected').html();
This just gets the text inside the li with the selected class.
I have used the text inside the element rather then the value attribute you have put on, as I'm not sure how supported that's going to be
Agreed with atmd. I'd instead have Angular build the li's with ng-repeat, then you have much more control instead of relying on jQuery to parse.
Here's another way to get the value with jQuery:
$scope.selected = $("#ulsel").find('.selected').attr('value');
Works in Chrome, didn't test further.
<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>
I am supposed to find a class and apply a logic for that.
My code structure is as follows.
<div class="class">
<form>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul class="ul_class">
<li>
<input ....><a ...><span ..></span>
<a href="#" title="View History" class="hstry">
<span class="hide"> </span></a>
</li>
<li>xxx</li>
</ul>
</form>
How to find the class hstry inside the ul with the class named ul_class.
Just use a normal CSS selector to find nested classes like the following:
$( 'ul.ul_class .hstry' )
Note the whitespace between both classes. Without it, it would match an element having both classes, instead of an element with class hstry which is below some <ul> element with class ul_class.
If you want the content, try
var hstry = $('body').find('.hstry').html();
Then you can operate with this variable any way you want.
Using jquery:
$("ul.ul_class").find(".hstr");
$('ul.ul_class .hstry').html(); //for html content
$('ul.ul_class .hstry').text(); //for text data