ruby-on-rails – Ruby on Rails / Bootstrap:模态中的动态数据
发布时间:2020-12-17 02:45:43 所属栏目:百科 来源:网络整理
导读:我从 Ruby on Rails开始,并对使用bootstrap的模态有疑问. 所以我的问题是我有一个表,对于这个表的每一行,我创建一个按钮,用模态显示有关依赖类的其他信息,但它只显示第一行的正确信息,所有其他行显示相同的信息.我想让它变得动态并与它所处理的对象相对应. t
我从
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 解决方法
您已将模态添加到每一行.
<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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |