加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读