Загрузочные панели внутри цикла Thymeleaf - тот же идентификатор и ссылка

Question

Я пытаюсь сгенерировать загрузочные панели в цикле Thymeleaf, вот так:

<table>
  <tr th:each="p, iterStat : ${completedList}">
    <td style="padding: 0 15px 0 15px;">
      <div class="panel panel-success">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"
               href="#collapseOne" th:text="${p.key}">p.k</a>
            <span style="float: right;" class="glyphicon glyphicon-ok"></span>
          </h4>
        </div>
        <div th:id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            <span th:text="${p.value}"></span>
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>

Но у меня так же id а также href для каждого элемента цикла, поэтому панели не работают.

Могу ли я сделать что-то для динамического изменения id а также href?

Answer 1

Вы можете использовать переменную состояния (iterStat) создать уникальный идентификатор для каждой строки:

<a data-toggle="collapse" data-parent="#accordion" th:href="'#collapse' + ${iterStat.index}" th:text="${p.key}">

а также

<div th:id="'collapse' + ${iterStat.index}" class="panel-collapse collapse in">

Answer 2

Я только что столкнулся с этой же проблемой, и то, что я сделал, было

      <div class="accordion" id="accordionExample"
                            th:each="todo : ${todos}">
                            <div class="accordion-item">
                                <h2 class="accordion-header" th:id="heading + ${todo.id}">
                                    <button class="accordion-button" type="button"
                                        data-bs-toggle="collapse"
                                        th:attr="data-bs-target=|#col${todo.id}" aria-expanded="true"
                                        aria-controls="collapseOne">Accordion Item #1</button>
                                </h2>
                                <div th:id="col + ${todo.id}"
                                    class="accordion-collapse collapse show"
                                    th:attr="aria-labelledby=|heading${todo.id}|"
                                    data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <strong>This is the first item's accordion body.</strong> It
                                        is shown by default, until the collapse plugin adds the
                                        appropriate classes that we use to style each element. These
                                        classes control the overall appearance, as well as the showing
                                        and hiding via CSS transitions. You can modify any of this
                                        with custom CSS or overriding our default variables. It's also
                                        worth noting that just about any HTML can go within the
                                        <code>.accordion-body</code>
                                        , though the transition does limit overflow.
                                    </div>
                                </div>
                            </div>
                        </div>

вместо того, чтобы объединять идентификатор, просто добавьте его в виде строки с th:attr, то значение должно быть помещено внутри | {dynamic value e.g id, uuid, primary key} |. затем соедините с +для th:idкоторый автоматически узнает свой эквивалентный атрибут, установленный ранее.