在.each循环中显示一个条目的模态-Rails/Bootstrap [英] Displaying a modal for one entry in a .each loop - Rails / Bootstrap

问题描述

我想要一个链接来打开一个模式，该模式显示在每个循环中显示的单击对象(word.title).现在，它会打开模态，然后针对循环中的每个项目再次显示它.

I'd like a link to open a modal displaying the clicked object (word.title), displayed in an each loop. Right now it opens the modal but then displays it again for every item in the loop.

    <h1>Glossary of words</h1>
    <p>Pagination at 25</p>

    <table class="table table-hover">
        <thead>
            <tr>
                <th>Title</th>
                <th>Definition</th>
                <th>Usage</th>
                <th>Word Type</th>
            </tr>
        </thead>
        <tbody>
        <% @words.each do |word| %>
            <tr>
                <th scope="row">
                    <a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">
                        <%= word.title %>
                    </a>
                        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                          <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                              <%= word.title %>
                            </div>
                          </div>
                        </div>
                </th>
                <td><%= word.title %></td>
                <td><%= word.definition %></td>
                <td><%= word.word_type %></td>
            </tr>

        <% end %>
        </tbody>
    </table>

// Word Modal
$('.bs-example-modal-sm').modal()

推荐答案

要使您的链接调用正确的模式，您需要将id分配给每个modals.并使用data-target属性通过将id of modal传递给模式来调用模式.

To make your links call the correct modal, you need to assign id to eachmodals. And use data-target attribute to call a modal by passing the id of modal in to it.

您的代码可能看起来像这样.

And you code might look like this.

<a href="#" data-toggle="modal" data-target="#modal-<%= word.id %>">
    <%= word.title %>
</a>

<div id="modal-<%= word.id %>" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <%= word.title %>
    </div>
  </div>
</div>

来源: http://getbootstrap.com/javascript/#live-demo

这篇关于在.each循环中显示一个条目的模态-Rails/Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！