導軌產品名稱在視圖

Question

我目前正在建設一個鐵軌項目與膳食菜單。 我有一些麻煩，從我的DB顯示product_name.Right現在它顯示多個btn與我所有的產品名稱，但我只是不想一個btn與他們各自的名稱。 我知道這是一個noob問題，但在這個問題上的股票。 下面是它看起來艾克現在： My menu website

這裏是我的代碼：

/app/views/main/_menu.html.erb

<div class="container"> 
    <div class="row"> 
    <% (1..8).each do |i| %> 
     <div class="col-sm-3 col-lg-3 col-md-3"> 
     <div class="thumbnail"> 
      <div class="image-container"> 
      <img id="menu-image" src="/assets/menu/menu-<%= i %>.jpg" alt=""> 
      </div> 

      <div class="caption"> 
      <h4 class="pull-right">$9.99</h4> 
      <h4> 
       <% @products.each do |product| %> 
       <a class="btn btn-default" data-toggle="modal" data-target="#myModal<%= i %>" style="color:#0B610B;"> 
        <%= product.product_name %> 
       </a> 
       <% end %> 
      </h4> 

      <p>This is the product description</a>.</p> 
      </div> 

      <div class="ratings"> 
      <p class="pull-right"> reviews</p> 
       <p> 
       <%= render "modal_menu" %> 
       <% (1..5).each do %> 
        <i class="fa fa-star-o rating-star"></i> 
       <% end %> 
       </p> 
      </div> 
      </div> 
     </div> 
     <% end %> 

Answer 1

在假設的順序的產品匹配飯菜的順序（看起來像它根據你的截圖）然後這可以做伎倆：

<% @products.each_with_index do |product, index| %> 
    <% if index+1 == i %> 
     <a class="btn btn-default" data-toggle="modal" data-target="#myModal<%= i %>" style="color:#0B610B;"> 
      <%= product.product_name %> 
     </a> 
    <% end %> 
<% end %> 

然而，直接在第一個位置而不是（1..8）循環產品會更清潔。例如（未經測試）：

<div class="row"> 
<% @products.each_with_index do |product, index| %> 
    <div class="col-sm-3 col-lg-3 col-md-3"> 
     <div class="thumbnail"> 
     <div class="image-container"> 
      <img id="menu-image" src="/assets/menu/menu-<%= index+1 %>.jpg" alt=""> 
     </div> 

     <div class="caption"> 
      <h4 class="pull-right">$9.99</h4> 
      <h4> 
      <a class="btn btn-default" data-toggle="modal" data-target="#myModal<%= index+1 %>" style="color:#0B610B;"> 
       <%= product.product_name %> 
      </a> 
      </h4> 

      <p>This is the product description</a>.</p> 
     </div> 

     <div class="ratings"> 
      <p class="pull-right"> reviews</p> 

      <p> 
      <%= render "modal_menu" %> 
      <% (1..5).each do %> 
       <i class="fa fa-star-o rating-star"></i> 
      <% end %> 
      </p> 
     </div> 
     </div> 
    </div> 
<% end %> 

我希望有幫助。