Question

我正在构建一个Thymeleaf + SpringBoot应用程序，我花了一点时间在Thymeleaf foreach循环中的一个div内有一个模态-它重复了几次，我想更新模态的索引以及显示它的按钮我的模态将通过特定的按钮显示。我在更新索引时遇到问题，因为当我这样做时，我的按钮停止工作并且没有显示任何模式...

我检查了：

a）How can I do data-target="#userId" in thymeleaf

b）using data-* attribute with thymeleaf

但仍然无法正常工作...

这是代码的一部分：循环：

<div th:each="myth : ${allMyths}">

这是按钮（注释的代码也不起作用...）：

<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal"
                        data-th-target="'#'+${myth.getId()}">More...
                        <!--th:attr="data-target='#'+${myth.getId()}">More...-->
                </button>

这是模态的顶部：

<div data-th-id="${myth.getId()}" class="modal fade" role="dialog">

在这里th：id也不起作用... 您知道为什么按钮和模式不能通过ID相互找到吗？

提前感谢您的回答/建议！

自拍

Answer 1

按钮：

FirstAsync()

模态顶部：

<button type="button" class="button" style="float: right; margin-right: 2%" data-toggle="modal" th:attr="data-target='#'+${myth.getId()}">More...</button>

Answer 2

这是我的春季图书应用+百里香叶视图中的工作原理：

 <tbody>
                                        <tr th:each="stockItem,index :${stock}">
                                            <td th:text="${stockItem.id}"></td>
                                            <td th:text="${stockItem.productName}"></td>
                                            <td th:text="${stockItem.productPrice}"></td>
                                            <td th:text="${stockItem.productQuantity}"></td>
                                            <td>
                                                <a class="btn btn-danger" role="button"
                                                   th:href="@{/stock/removeAll/{id}(id=${stockItem.id})}">
                                                    Remove all
                                                </a>
                                                <br>
                                                <a data-target="#removeSetStockQuantityModal" data-toggle="modal"
                                                   th:attrappend="data-target=${stockItem.id}" class="btn btn-danger" role="button">Set Quantity</a>
                                                <!-- Modal -->
                                                <div class="modal fade" id="removeSetStockQuantityModal"
                                                     th:attrappend="id=${stockItem.id}" tabindex="-1" role="dialog"
                                                     aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Delete <span
                                                                        th:text="${stockItem.productName}"></span></h5>
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close">
                                                                    <span aria-hidden="true">&times;</span>
                                                                </button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <form action="#" method="get"
                                                                      th:action="@{/stock/delete}"
                                                                      th:object="${stockItem}">
                                                                    <input  hidden name="id" th:value="${stockItem.id}"/>
                                                                    <label th:for="${stockProduct.productQuantity}">
                                                                        <input  type="number"
                                                                               placeholder="Enter quantity to delete" th:default="0"
                                                                               th:field="${stockProduct.productQuantity}"/>
                                                                    </label>
                                                                    <input type="submit" class="btn btn-danger" value="Delete"/>
                                                                </form>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                        data-dismiss="modal">Cancel
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>

Thymeleaf模态数据目标和ID在循环中更新

2 个答案: