Динамический бутстрап Thymeleaf модальный от кнопки редактирования с таблицей HTML

Question

У меня есть таблица

<table id="deleteTable" class="display table stripe">
    <thead>
    <tr class="tr-class" style="color: white!important; background-color: #41424a!important">
        <th>Friendly Name</th>
        <th>File Path</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
        <tr th:each="list: ${canDelete}">
            <td th:text="${list.friendlyName}" style="padding-left: 1em"></td>
            <td th:text="${list.filePath}"></td>
            <td style="padding-left: 2em; width: 10em">
                <a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"><span class="glyphicon glyphicon-trash"></span></a>
            </td>
        </tr>
        <tr>
            <td style="padding-left: 1em"></td>
            <td></td>
            <td>
                <a style="padding-left: 3.2em; cursor: pointer;" data-target="#exampleModalCenter" data-toggle="modal">
                    <i class="fa fa-plus"></i>
                </a>
            </td>
        </tr>
    </tbody>
</table>

В этих таблицах используется тимелеф th:each для перебора списка объектов.Я хочу иметь возможность щелкнуть по моей иконке корзины в каждой строке таблицы и удалить строку.Я пытаюсь передать свойство объекта в модальное состояние в качестве теста.

Модальное:

<div class="modal fade" th:id="'modal-warning'+${list.filePath}" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Remove Delete Permission</h5>
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form action="#" th:action="@{/users/deletePermissions/approve}" th:object="${canDelete}">
                <div>
                    <div>
                        <span th:text="${list.filePath}"></span>
                    </div>
                    <div style="padding-top: 1em; float: right;">
                        <button id="submitBtn" type="submit" class="mdc-button mdc-button--raised">
                            <span class="mdc-button__label">add delete permission</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Я считаю, что проблемы находятся в таблице:

<a data-toggle="modal" data-target="#modal-warning" th:attr="data-target='#modal-warning'+${list.filePath}"><span class="glyphicon glyphicon-trash"></span></a>

или модал:

th:id="'modal-warning'+${list.filePath}"

Обновление 1:

Забыл указать ошибку, которую я получаю ..

Этоговорит мне, что на моей HTML-странице он не может анализировать ноль для $ {list.filePath} в строке 84. Это строка кода для модального идентификатора ... это как будто он пытается разобрать это прямо сейчас, а не при модальной загрузке

Answer 1

Переменная ${list} определена в вашем th:each - и доступна только для дочерних тегов вашего <tr />.К тому времени, когда модальный html анализируется, переменная ${list} больше не находится в области видимости.Теперь он нулевой, поэтому вы получаете сообщение об ошибке.

Вам придется изменить способ открытия модального окна (возможно, с помощью javascript ... если вы не хотите создать модальный режим).для каждой строки таблицы).