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>
Related
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.
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 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.
We have this nested list:
<ul id="AllTopics" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search topic...">
<li>Polite Phrases<span class="ui-li-count">101</span>
<ul data-role="listview" data-inset="true" >
<li >Polite Phrases<span class="ui-li-count">101</span></li>
<li >At The End Of A Letter/Email<span class="ui-li-count">101</span></li>
</ul>
</li>
</ul>
The first <ul> with the id="AllTopics" is in the html documnet itself,
The inner <li><ul><li>... are loaded from Ajax call like:
on('pageinit'... event
... $("ul").append(...
I can get the event from the first new born <li> , like:
$('#AllTopics').on('click','li',function (event){...
But the inner <li> or <a> do not seem to fire events :-(
Ani ideas ?
Thank's in advance
The problem would be that the new content is loaded using an Ajax call, and you just setup the events before, so the new elements won't have them.
Try using delegate JQuery function:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on my links?!');
});
EDIT
Other solution is to assign the events once elements are added via Ajax call.
// This is an example, retrieve the data on your own form
$.get('mypage.php',function(data){
// Add content to your DOM elements
$('#AllTopics').append(data);
// Assign events
$('#AllTopics').on('click','li',function (event){
alert('Holy moly, you keep clicking on my links!');
});
});
Note: I just realized that your HTML elements have this composition:
<ul>
<li>
<a/>
</li>
<span/>
<ul>
<li>
</a>
</li>
</ul>
</ul>
So, OF COURSE that is only affecting the first one because there are two levels of li - a (you have an ul element inside another one). You can define an ID for your second group of li - a elements to trigger events successfully or keep doing it in this way:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on the first link?!');
});
$('#AllTopics').delegate('ul li a','click',function(){
alert('Stop clicking my children links!');
});