ruby-on-rails – Ruby on RailsBootstrap：模态中的动态数据

概述我从 Ruby on Rails开始,并对使用bootstrap的模态有疑问. 所以我的问题是我有一个表,对于这个表的每一行,我创建一个按钮,用模态显示有关依赖类的其他信息,但它只显示第一行的正确信息,所有其他行显示相同的信息.我想让它变得动态并与它所处理的对象相对应. <table class="table table-hover table-condensed"> <tr> 我从 Ruby on Rails开始,并对使用bootstrap的模态有疑问.
所以我的问题是我有一个表,对于这个表的每一行,我创建一个按钮,用模态显示有关依赖类的其他信息,但它只显示第一行的正确信息,所有其他行显示相同的信息.我想让它变得动态并与它所处理的对象相对应.

<table >          <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 >                        <a >Options</a>                        <a  data-toggle="dropdown" href="#"><span ></span></a>                        <ul >                            <li><%= link_to 'Show',user_story %></li>                            <li ></li>                            <li><%= link_to 'Edit',edit_user_story_path(user_story) %></li>                            <li ></li>                            <li> <%= link_to 'Destroy',user_story,:confirm => 'Are you sure?',:method => :delete %></li>                        </ul>                    </div>            </td>            <td> <a href="#myModal" role="button"  data-toggle="modal">Global VIEw</a></td>            <div ID="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hIDden="true">              <div >                <button type="button"  data-dismiss="modal" aria-hIDden="true">×</button>                <h3 ID="myModalLabel">Golbal vIEw : <%= user_story.name %></h3>              </div>              <div >                        <% us = user_story.functionalitIEs %>                        <% us.each do |f| %>                        <span ><%= 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 >                <button  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 :tasksend

解决方法 您已将模态添加到每一行.

<div ID="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hIDden="true">

但是对于每一行,模态的ID都是相同的.所以你得到的每一行都有相同的对话框.您需要为模态以及在模态div中使用ID的任何位置创建动态ID.

<a href="#myModal<%= user_story.ID%>" role="button"  data-toggle="modal">Global VIEw</a><div ID="myModal<%= user_story.ID%>"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hIDden="true">              <div >                <button type="button"  data-dismiss="modal" aria-hIDden="true">×</button>                <h3 ID="myModalLabel<%= user_story.ID%>">Golbal vIEw : <%= user_story.name %></h3>              </div>              <div >                        <% us = user_story.functionalitIEs %>                        <% us.each do |f| %>                        <span ><%= 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 >                <button  data-dismiss="modal" aria-hIDden="true">Close</button>              </div>            </div>

总结

以上是内存溢出为你收集整理的ruby-on-rails – Ruby on Rails / Bootstrap：模态中的动态数据全部内容，希望文章能够帮你解决ruby-on-rails – Ruby on Rails / Bootstrap：模态中的动态数据所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。