Thymeleaf 模态数据目标和循环中的 id 更新答案

【问题标题】：Thymeleaf modal data-target and id update in the loopThymeleaf 模态数据目标和循环中的 id 更新
【发布时间】：2019-03-27 00:14:38
【问题描述】：

我正在构建一个 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 找到彼此吗？

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

彼得

【问题讨论】：

你能告诉我们你的错误日志吗？这可以帮助我们。
嗨阿兰！实际上，当我按下按钮时我没有出现任何错误 - 它只是不起作用:)它仅在我回到标准设置时才显示模式，例如： data-target="#someId" 和在模态 id="someId"
当涉及到我的页面时，它只是 " thymeleaf.org">" 并且在依赖项中我有 "org.thymeleafthymeleaf-spring33.0.10.RELEASE" 和 "org.springframework.bootspring-引导启动器-thymeleaf"
其实我是用另一种方式解决的！我在java中找到了一个脚本：“ " 我只是在 modal 和 button 中声明 th:id 并且它可以工作:)

标签： spring-boot bootstrap-modal thymeleaf

【解决方案1】：

按钮：

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

模态的顶部：

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

【讨论】：

【解决方案2】：

这是它在我的 Spring book 应用程序 + thymeleaf 视图中的工作方式：

 <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>

【讨论】：