Schienen Produktname In Ansichten

Question

Ich baue derzeit ein Rails-Projekt mit Mahlzeit Menü. Ich habe einige Probleme, den product_name von meinem DB.Right anzuzeigen, jetzt zeigt es mehrere btn mit meinem ganzen Produktnamen an, aber ich wollte nur einen btn mit ihren jeweiligen Namen. Ich weiß, es ist eine noob Frage, aber im Lager für dieses Problem. Hier ist, was es jetzt aussehen lke: My menu website

Hier ist mein Code:

/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

Unter der Annahme, dass die Reihenfolge der Produkte entsprechen der Reihenfolge der Mahlzeiten (sieht wie es nach Ihrem Screenshot), dann könnte dies den Trick tun:

<% @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 %> 

Es wäre jedoch sauberer, die Produkte direkt anstelle von (1..8) zu durchlaufen. Zum Beispiel (ungetestet):

<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 %> 

Ich hoffe, dass hilft.