In thymeleaf, I have a for each loop like so:
<ul class="days">
<li th:each="day : ${days}" th:text="${day}" >1</li>
</ul>
This successfully lists all of the strings in an array called days which is populated like ["1","2","3"..."31"] representing the days in a given month.
I also have an array of items which also contains days as strings.
Here is what I want to do in pseudo code but am struggling to figure out how to achieve it:
For each day in days; For each day in items ; if items.day =
days.day then set 'class=active' (bootstrap) and th:text =days.day
else
th:text=days.day
So if theres a day in items that matches a day in days then the <li> element is set to class=active and make the <li> clickable with href="/myurl". And either way the day from days is the th:text of the <li>.
Sorry if thats hard to understand, I tried to make it as clear as I could.
EDIT:
This is latest attempt:
<ul class="days">
<li th:each="s : ${days}" th:with="found=${false}">
<span th:each="item : ${items}" th:if="{$item.day == s}">
<span th:text="${s}" th:classappend="active" th:href
th:with="${found} = true"></span>
</span>
<span th:if="{$found == false}">
<span th:text="${s}"></span>
</span>
</li>
</ul>
I think you can achieve this with conditional expressions. Simply write something like
<span th:text="${s}" th:classappend="${#lists.contains(items, s)}? 'active' : ''">
This code also uses #lists, a very useful feature of Thymeleaf.
Related
How to iterate a Array and build a url ?
I have a Array like below ticketList and need a ResultList as below with a hyperlink attached
ticketList = [JR8908,JR7676,JR7687,JR8798]
I want the result
ResultList : [ JR8908,JR7676,JR7687,JR8798]
Hyperlink would be - http://localhost:8080/browse/ticketID
<ul th:each="ticket: ${ticketList}">
<li th:href="http://localhost:8080/browse/${ticket}" th:text="${ticket}"></li>
</ul>
Below code worked for me, hope this helps someone :)
<ul>
<li th:each="ticket : ${ticketList}">
<a th:text="${ticket}" th:href="#{'http://localhost:8080'+${ticket}}"></a>
</li>
</ul>
In an ng-repeat I want to add a hide-xs attribute on an element based on the current scope.
How can I do that?
I basically want to do something like (this obviously don't work):
<li ng-repeat="item in items" hide-xs="{{ item.showAlways ? 'false' : 'true' }}">
{{item.title}}
</li>
Edit
I ended up doing this (as suggested by DieuNQ) but if anybody know how to do it using directive and not class I would take it
<li ng-repeat="item in items" ng-class="{'hide-xs': !item.showAlways }}">
{{item.title}}
</li>
hide-xs not works like that (it does not depend on true or false). It just add class to your tag. Try this:
In your html:
<li ng-repeat="item in items" ng-model="item.showAlways" ng-class="someClass">
...
</li>
In your controller:
$scope.item.showAlways ? $scope.someClass == '' : $scope.someClass == 'hide-xs';
I want to change the button texts from Pager UI-Bootstrap in Angular.
I've this array:
categories = ["Standard", "Premium"];
But this code show the variable's name and with moustache doesn't work.
<uib-pager total-items="categories.length" items-per-page=1 ng-model="page" previous-text=categories[page-2] next-text=categories[page] ></uib-pager>
This works but I would prefer use uib-pager:
<ul class="pager">
<li class="previous" ng-class="{'disabled':!categories[pag-2]}" ng-click="pag=pag-1">{{categories[pag-2]}}</li>
<li class="next" ng-class="{'disabled':!categories[pag]}" ng-click="pag=pag+1">{{categories[pag]}}</li>
</ul>
I have a .gsp page where a student can select a course that they are in. That selection is then stored in an array list. I have another .gsp page that shows student details and within those details it shows which course they selected from the other page. However, when it displays the course it displays like this: "[courseName]", but I would like it to display without the brackets: "courseName".
This is my code for displaying the selection:
<g:if test="${studentDetails?.course}">
<li class="fieldcontain">
<span id="course-label" class="property-label">
<g:message code="student.course.label" default="Course(s)" /></span>
<span class="property-value" aria-labelledby="course-label">
<g:set var="course" value="${studentDetails?.course.courseName}" />
<g:message message="${course}" /></span>
</li>
</g:if>
So far I've tried displaying the variable with g:fieldValue, g:message, and just the variable itself without a tag. All methods display with the brackets. Any suggestions on how to remove the brackets are appreciated. If any other code is needed I can provide it. Thanks.
If your studentDetails?.course.courseName contains a List of courses and your want to display all of them, you need to convert it to a String. But default implementation of List.toString() uses brackets. Your could use .join(',') instead.
Like:
<g:if test="${studentDetails?.course}">
<li class="fieldcontain">
<span id="course-label" class="property-label">
<g:message code="student.course.label" default="Course(s)" /></span>
<span class="property-value" aria-labelledby="course-label">
${studentDetails.course.courseName.join(', ')}
</span>
</li>
</g:if>
Also I suggest to add .encodeAsHTML() if you got this data (course name) from a user, to escape any HTML content inside variables (avoid XSS, etc). Like:
${studentDetails.course.courseName.join(', ').encodeAsHTML()}
I have an html template that filters a list by the column property of the objects of that list like so:
<ul>
<li card-view
card-id="state.card"
ng-repeat="state in ctrl.game.states | filter:{column:'backlog'} "
ng-include="cardview.html">
</li>
</ul>
If I modify the column property in one of the elements of that list, the display does not update.
How can I make that happen?
Here's one option that uses an imaginary placeholder tag and avoids the |filter replacing it with an ng-if, but I hope someone has a better answer than this one.
<ul>
<xx ng-repeat="state in ctrl.game.states">
<li card-view
card-id="state.card"
ng-if="state.column == 'backlog'"
ng-include="cardview.html">
</li>
</xx>
</ul>
Doing the ng-if and ng-repeat on the same element didn't work.