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';
Related
I have a badge used inside the bootstrap card. There are 3 possible values for this badge. FREE, BASE, PREMIUM.
I want to use different colors for these 3 values.
Div class looks like this:
<div class="badge text-white position-absolute" th:text="${content.getCategory()}"></div>
How can I update my class on the fly to use bg-dark for BASE, bg-primary for FREE, and bg-danger for PREMIUM?
I tried to use literal substitutions for th:classappend but I could not find a way to make it work with triple possible values.
You could do it like this:
<div class="badge text-white position-absolute"
th:with="category=${content.category.toString()}"
th:classappend="|${category == 'BASE' ? 'bg-dark' : ''}${category == 'FREE' ? 'bg-primary' : ''}${category == 'PREMIUM' ? 'bg-danger' : ''}|"
th:text="${category}"></div>
This also works by defining an inline map:
<div class="badge text-white position-absolute"
th:with="categoryClass=${ {'BASE': 'bg-dark', 'FREE': 'bg-primary', 'PREMIUM': 'bg-danger'} }"
th:classappend="${categoryClass.get(content.category.toString())}"
th:text="${content.category}"></div>
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.
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.
I am trying to simply add an HTML class if a database value returned is a specific number. Here is what I tried:
<ul class="dog-sizes-list">
<li <%= if given_size == 1 then puts "class='active'" end %>><img src="/assets/dogs/dog-icon.png" width="30px" /></li>
<li <%= if given_size == 2 then puts "class='active'" end %>><img src="/assets/dogs/dog-icon.png" width="40px" /></li>
<li <%= if given_size == 3 then puts "class='active'" end %>><img src="/assets/dogs/dog-icon.png" width="50px" /></li>
<li <%= if given_size == 4 then puts "class='active'" end %>><img src="/assets/dogs/dog-icon.png" width="60px" /></li>
</ul>
However nothing happens and no error is produced. Furthermore, I ran the AR code in console and it returned the correct value. Specifically:
given_size = Client.where(user_id: listing.client_id).first.dogsize
What is the best approach for this?
You could get the required result in this manner:
<li class="<%= "active" if given_size == 1 %>"></li>
If you are using this kind of method regularly it would be adivsable to extract it into a helper method. The helper can be placed into your application_helper.rb file or other suitable place
def class_for_thing(thing)
if thing == whatever
"blah"
else
"not-blah"
end
There is no point of "active" condition because all items are active according to your code.
It seems you only want to customize the image size according to the given size. If so the better way is to define it in model, or better, in a presenter.
class Dog < ActiveRecord::Base
SIZE_AND_IMAGE = { '1': '30px', '2': '40px', '3': '50px', '4': '60px' }
# Can fallback to a default size of 30px if no size given
def image_size
given_size ? SIZE_AND_IMAGE[given_size.to_s] : '30px'
end
end
# In View
<ul class="dog-sizes-list">
<li><img src="/assets/dogs/dog-icon.png" width="#{#dog.image_size}" /></li>