ruby-on-rails - Ruby on Rails/ Bootstrap : dynamic datas in a modal

Question

我从 Ruby on Rails 开始，有一个关于使用 Bootstrap 模式的问题。
所以我的问题是我有一个表，并且对于该表的每一行，我制作了一个按钮以使用模态显示有关依赖类的一些其他信息，但它仅为第一行显示正确的信息，而为所有其他行显示相同的信息.我想让它动态并对应于它处理的对象。

      <table class="table table-hover table-condensed">
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
            <th>Priority</th>
            <th>State</th>
            <th></th>
            <th></th>
          </tr>

        <% @user_stories.each do |user_story| %>
          <tr>
            <td><%= user_story.id %></td>
            <td><%= user_story.name %></td>
            <td><%= user_story.description %></td>
            <td><%= user_story.priority %></td>
            <td><%= user_story.state %></td>

            <td>
                    <div class="btn-group">
                        <a class="btn btn-primary">Options</a>
                        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><%= link_to 'Show', user_story %></li>
                            <li class="divider"></li>
                            <li><%= link_to 'Edit', edit_user_story_path(user_story) %></li>
                            <li class="divider"></li>
                            <li> <%= link_to 'Destroy', user_story, :confirm => 'Are you sure?', :method => :delete %></li>
                        </ul>
                    </div>
            </td>
            <td> <a href="#myModal" role="button" class="btn" data-toggle="modal">Global View</a></td>
            <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Golbal view : <%= user_story.name %></h3>
              </div>
              <div class="modal-body">
                        <% us = user_story.functionalities %>
                        <% us.each do |f| %>
                        <span class="label label-info"><%= f.name %></span>
                        <% t = f.tasks%>
                        <br/>
                            <% t.each do |y| %>
                            <%= y.name %>
                            <% u = User.where(:id => y.user_id) %>
                            <%= u.collect {|p|  ": #{p.first_name} #{p.last_name}"} %>
                            <br/>
                            <% end %>
                        <br/>
                        <% end %>
              </div>
              <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

              </div>
            </div>
          </tr>
        <% end %>
        </table>

任何想法如何解决它？

路线:

Backlog::Application.routes.draw do
    resources :functionalities

    resources :user_stories

    resources :users

    resources :tasks
end

Answer 1

您已将模式添加到每一行。

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

但是在这里，对于每一行，模态的 id 都是相同的。因此，您会为每一行获得相同的对话框。您需要为模态以及在模态 div 中使用 id 的任何位置创建动态 id。

<a href="#myModal<%= user_story.id%>" role="button" class="btn" data-toggle="modal">Global View</a>
<div id="myModal<%= user_story.id%>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel<%= user_story.id%>">Golbal view : <%= user_story.name %></h3>
              </div>
              <div class="modal-body">
                        <% us = user_story.functionalities %>
                        <% us.each do |f| %>
                        <span class="label label-info"><%= f.name %></span>
                        <% t = f.tasks%>
                        <br/>
                            <% t.each do |y| %>
                            <%= y.name %>
                            <% u = User.where(:id => y.user_id) %>
                            <%= u.collect {|p|  ": #{p.first_name} #{p.last_name}"} %>
                            <br/>
                            <% end %>
                        <br/>
                        <% end %>
              </div>
              <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

              </div>
            </div>