Come fare if-else in Thymeleaf?


132

Qual è il modo migliore per fare un semplice if- elsein Thymeleaf?

Voglio ottenere in Thymeleaf lo stesso effetto di

<c:choose>
  <c:when test="${potentially_complex_expression}">
     <h2>Hello!</h2>
  </c:when>
  <c:otherwise>
     <span class="xxx">Something else</span>
  </c:otherwise>
</c:choose>

in JSTL.

Quello che ho immaginato finora:

<div th:with="condition=${potentially_complex_expression}" th:remove="tag">
    <h2 th:if="${condition}">Hello!</h2>
    <span th:unless="${condition}" class="xxx">Something else</span>
</div>

Non voglio valutare potentially_complex_expressiondue volte. Ecco perché ho introdotto la variabile locale condition. Non mi piace ancora usare entrambi th:if="${condition}e th:unless="${condition}".

Una cosa importante è che io uso due diversi tag HTML: diciamo h2e span.

Puoi suggerire un modo migliore per raggiungerlo?

Risposte:


208

Thymeleaf ha un equivalente di <c:choose>e <c:when>: gli attributi th:switche th:caseintrodotti in Thymeleaf 2.0.

Funzionano come ti aspetteresti, usando *per il caso predefinito:

<div th:switch="${user.role}"> 
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p> 
</div>

Vedi questo per una rapida spiegazione della sintassi (o dei tutorial di Thymeleaf).

Disclaimer : come richiesto dalle regole StackOverflow, sono l'autore di Thymeleaf.


ok ma..come posso invocare un javascript in base al tipo di cliente (ovvero anonimo o loggato) ...
Lucky

1
Vedi il capitolo "Inline text", in particolare la sezione "JavaScript inline" del tutorial "Uso di Thymeleaf" in thymeleaf.org/documentation.html
Daniel Fernández,

E come posso fare: attivare un valore iterator.index? Voglio fare una serie di casi quando il valore è <5 e passare al caso predefinito se il valore è> 5
Perdente Coder

@ DanielFernández: puoi aiutarmi per favore con stackoverflow.com/questions/48499723/… . Non potevo etichettarti direttamente sulla domanda. Davvero bloccato.
molo

98

Ho provato questo codice per scoprire se un cliente è connesso o anonimo. Ho fatto utilizzando le th:ife th:unlesscondizionali espressioni. Modo abbastanza semplice per farlo.

<!-- IF CUSTOMER IS ANONYMOUS -->
<div th:if="${customer.anonymous}">
   <div>Welcome, Guest</div>
</div>
<!-- ELSE -->
<div th:unless="${customer.anonymous}">
   <div th:text=" 'Hi,' + ${customer.name}">Hi, User</div>
</div>

5
Ciò non risponde alla domanda del PO perché si trattava di evitare la duplicazione di espressioni complesse. E come altre soluzioni, questo rompe l'idea dei "modelli naturali", che è un importante punto di forza di Thymeleaf. Non sono sicuro di cosa fare da solo, ma volevo solo segnalarlo nel caso in cui qualcuno abbia una risposta.
Stephen Harrison,

@Lucky questo mi dà un errore EL1007E: (pos 0): impossibile trovare la proprietà o il campo "Stato"
Jesse

@Jackie Nell'esempio precedente il cliente è un oggetto e anonimo è un campo booleano nella classe Cliente. Assicurati che il tuo oggetto non sia nullo e che il nome del campo sia corretto.
Lucky

25

Vorrei condividere il mio esempio relativo alla sicurezza oltre a Daniel Fernández.

<div th:switch="${#authentication}? ${#authorization.expression('isAuthenticated()')} : ${false}">
    <span th:case="${false}">User is not logged in</span>
    <span th:case="${true}">Logged in user</span>
    <span th:case="*">Should never happen, but who knows...</span>
</div>

Ecco un'espressione complessa con oggetti di utilità 'autenticazione' e 'autorizzazione' misti che producono risultati 'vero / falso' per il codice del modello thymeleaf.

Gli oggetti di utilità "Autenticazione" e "Autorizzazione" provenivano dalla libreria di molle extra di sicurezza 3 . Quando l'oggetto 'autenticazione' non è disponibile OPTION.expression ('isAuthenticated ()') restituisce 'false', l'espressione restituisce $ {false}, altrimenti $ {true}.


19

Puoi usare

If-then-else:  (if) ? (then) : (else)

Esempio:

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

Potrebbe essere utile per le nuove persone che fanno la stessa domanda.


11

Un'altra soluzione: è possibile utilizzare la variabile locale:

<div th:with="expr_result = ${potentially_complex_expression}">
    <div th:if="${expr_result}">
        <h2>Hello!</h2>
    </div>
    <div th:unless="${expr_result}">
        <span class="xxx">Something else</span>
    </div>
</div>

Maggiori informazioni sulle variabili locali:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#local-variables


Penso che tu abbia aggiunto un ulteriore segno "=" nel tuo codice. Verifica di nuovo e correggilo se ho ragione.
Lucky

Secondo me il codice è ok. Non so quale segno '=' extra intendi.
jareks,

Sì, il codice è ok. Scusa, l'ho confuso con il punto in th:eachcui ha l'espressione :invece di=
Lucky

Ma questa risposta è molto vicina alla mia soluzione. Mentre faccio il th: con l'espressione mi sembra ridondante. Fondamentalmente questa soluzione utilizza th: if e th: a meno che le istruzioni condizionali.
Lucky

Penso che non sia ridondante. Se usi solo th: if e th: a meno che un'espressione complessa non venga eseguita due volte ...
jareks,

9

Nel caso più semplice (quando i tag html sono uguali):

<h2 th:text="${potentially_complex_expression} ? 'Hello' : 'Something else'">/h2>

Sai come aggiungere traduzioni per "Ciao" e "Qualcos'altro" in questa espressione?
Laura,

@Laura È possibile utilizzare l'internazionalizzazione e caricare traduzioni in lingue diverse in base alla posizione dal file delle proprietà. Vedi looksok.wordpress.com/tag/internationalization , marcelustrojahn.com/2016/12/…
Lucky

7

Un'altra soluzione sta semplicemente usando notper ottenere la negazione opposta:

<h2 th:if="${potentially_complex_expression}">Hello!</h2>
<span class="xxx" th:if="${not potentially_complex_expression}">Something else</span>

Come spiegato nella documentazione , è la stessa cosa dell'uso th:unless. Come hanno spiegato altre risposte:

Inoltre, th:ifha un attributo inverso th:unless, che avremmo potuto usare nell'esempio precedente invece di usare un'espressione OGNL non interna

L'uso notfunziona anche, ma IMHO è più leggibile da usare th:unlessinvece di negare la condizione con not.


2
<div th:switch="${user.role}"> 
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p> 
</div>


<div th:with="condition=${potentially_complex_expression}" th:remove="tag">
<h2 th:if="${condition}">Hello!</h2>
<span th:unless="${condition}" class="xxx">Something else</span>
</div>

1
<div style="width:100%">
<span th:each="i : ${#numbers.sequence(1, 3)}">
<span th:if="${i == curpage}">
<a href="/listEmployee/${i}" class="btn btn-success custom-width" th:text="${i}"></a
</span>
<span th:unless="${i == curpage}">
<a href="/listEmployee/${i}" class="btn btn-danger custom-width" th:text="${i}"></a> 
</span>
</span>
</div>

inserisci qui la descrizione dell'immagine


1

Utilizzare th:switchcome unif-else

<span th:switch="${isThisTrue}">
  <i th:case="true" class="fas fa-check green-text"></i>
  <i th:case="false" class="fas fa-times red-text"></i>
</span>

Usa th:switchcome aswitch

<span th:switch="${fruit}">
  <i th:case="Apple" class="fas fa-check red-text"></i>
  <i th:case="Orange" class="fas fa-times orange-text"></i>
  <i th:case="*" class="fas fa-times yellow-text"></i>
</span>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.