Question

我试图将“ i”标记与三元运算符一起使用。 “ unavailable”，“ available”这两个字符串可以正常工作，但是我想使用2个图标代替它们，例如校验符号（fa fa-check）和X符号（fa fa-times）。

任何帮助将不胜感激。

<td th:text="${phone.assigned == true ? 'unavailable' : 'available'}" >Availability</td>

<td class="checkSign"><i class="fa fa-check" aria-hidden="true"></i></td>
<td class="xSign"><i class="fa fa-times" aria-hidden="true"></i></td>

Answer 1

使用IF吗？

<td>
  <i th:if="${phone.assigned == true}" class="fa fa-check" aria-hidden="true"></i>
  <i th:if="${phone.assigned == false}" class="fa fa-times" aria-hidden="true"></i> 
</td>

Answer 2

尝试使用th:classappend

<td class="checkSign"><i class="fa" th:classappend="${phone.assigned} ? fa-check : fa-times" aria-hidden="true"></i></td>

Answer 3

<td class="checkSign"><i class="${phone.assigned === true ? fa fa-check : fa fa-times}" aria-hidden="true"></i>Availability</td>

Answer 4

执行此操作的适当方法是th:classappend（另一个答案是在值周围缺少引号，这会导致错误）。这有效：

<td>
  <i class="fa" th:classappend="${phone.assigned ? 'fa-check' : 'fa-times'}" aria-hidden="true"></i>
</td>

话虽这么说，另一种解决方案确实有效，但是将booleans与true和false进行比较有点愚蠢。如果使用该解决方案，它应该看起来像这样：

<td>
  <i th:if="${phone.assigned}" class="fa fa-check" aria-hidden="true"></i>
  <i th:if="${!phone.assigned}" class="fa fa-times" aria-hidden="true"></i> 
</td>

或者这个：

<td>
  <i th:if="${phone.assigned}" class="fa fa-check" aria-hidden="true"></i>
  <i th:unless="${phone.assigned}" class="fa fa-times" aria-hidden="true"></i> 
</td>

Answer 5

我知道这已经快 2 岁了，但如果有人需要的话。我是这样用的。

<td>
 <i th:class="${phone.assigned}?'fa fa-check':'fa fa times'" aria-hidden="true"></i>
</td>

如何在三元运算符中使用<i>标记？

5 个答案: