Question

视图将元素列表传递给模板，例如电影列表，并将它们呈现在表格中。每个元素都有其细节，一个特定元素有一个列表。这个列表的内容我想把它们放在一个模态中。我这样做有两个for循环，如下所示：

<table>
  <thead>
    <tr>
       <td>title</td>
       <td>description</td>
       <td>hours</td>
    </tr>
  </thead>
  <tbody>
    {% for key in movies %}
     <tr>
       <td>{{ key.title }}</td>
       <td>{{ key.description }}</td>
       <td>
          <!--This button calls my modal-->
          {% for hour in key.hours %}
             <li>{{ hour }}</li>
          {% endfor %}
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"></button>
       </td>
     </tr>
    {% endfor %}
  </tbody>
</table>

我的模态在我的桌子外面，包裹着我的桌子。我想将第二个for循环的值传递给我的模态。当用户点击按钮时，值会出现在模态内。

我该怎么做？

Answer 1

您有两个选择

单击按钮时，可以使用Javascript更改模态的内容。
您可以为每部电影创建一个模态，而不是一个模态。根据您单击的按钮，将打开另一个模式。

Answer 2

正如@jastr所说，有两种解决方案。其中一个是做这样的事情：

使用<li>

<ul>

为您的按钮添加课程，例如open-modal
在按钮上添加点击监听器，当用户点击时按钮，您将列表添加到模态

首先，对您的html进行一些更改：

<table>
  <thead>
    <tr>
       <td>title</td>
       <td>description</td>
       <td>hours</td>
    </tr>
  </thead>
  <tbody>
    {% for key in movies %}
     <tr>
       <td>{{ key.title }}</td>
       <td>{{ key.description }}</td>
       <td>
          <!-- You may want to put this whole list into your modal body -->
          <ul>
          {% for hour in key.hours %}
             <li>{{ hour }}</li>
          {% endfor %}
          </ul>
          <button type="button" class="btn btn-default open-modal" data-toggle="modal" data-target="#myModal"></button>
       </td>
     </tr>
    {% endfor %}
  </tbody>
</table>

然后，您可以添加这样的单击侦听器，将列表插入到模式中：

<script type="text/javascript">
    $('.open-modal').click(function (e) {
        $('#myModal .modal-body').html($(this).prev().clone());
    });
</script>

将数据传递给bootstrap模式Django模板

2 个答案: