ruby-on-rails - 仅当用户输入数字时，如何动态显示项目（图标）？导轨 5.2

Question

我正在构建一个房地产应用程序，用户可以在其中添加浴室、车库、厨房等设施。

问题是，我希望如果用户介绍一个数字，比如 1 个浴室和 1 个厨房，如果他将其他设施留空，它只会显示他填写的那个。我使用嵌套属性：

property.rb 模型

class Property < ApplicationRecord
    belongs_to :owner
    has_many :amenities
    accepts_nested_attributes_for :amenities
end

amenity.rb 模型

class Amenity < ApplicationRecord
    belongs_to :property
end

显示.html.erb

 <div class="section">    
    <div class="row">
        <div class="container">
            <div class="col l6">
                <h5>Description</h5>
                <p class="text-justify"><%= @property.description %></p>
            </div>

            <div class="col l6">
                <h5>Amenities</h5>

               <!--Nested icons-->
                <% @property.amenities.each do |amenity|%>
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">gym</p>
                            <p class="no-margin-top-bottom"><%= amenity.gym %></p>
                        </div>
                    </div>

                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">kitchen</p>
                            <p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
                        </div>
                    </div>
                <% end %>   
            </div>
        </div>
    </div>

物业网络表格

<%= form_with(model: property, local: true) do |form| %>
    <% if property.errors.any? %>
        <div id="error_explanation">
            <h2><%= pluralize(property.errors.count, "error") %> prohibited this property from being saved:</h2>

            <ul>
                <% property.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <div class="section">
        <div class="row">
            <div class="container">
                <div class="col l9">
                    <div class="col l5">
                        <div class="input-field">
                            <i class="material-icons-two-tone prefix">edit</i>
                            <label for="icon_prefix"><%= form.label :name %></label><br />
                            <%= form.text_field :name, class:"form-control" %>
                        </div>
                    </div>

                    <div class="col l6">
                        <div class="input-field">
                            <i class="material-icons-two-tone prefix">edit</i>
                            <label for="icon_prefix"><%= form.label :description %></label><br />
                            <%= form.text_area :description, class:"form-control materialize-textarea" %>
                        </div>
                    </div>

                    <div class="col l2">
                        <div class="input-field">
                            <i class="material-icons-two-tone"></i>
                            <label for="icon_prefix"><%= form.label :price %></label>
                            <%= form.number_field :price, class:"form-control" %>
                        </div>
                    </div>
                </div>

                <div class="col l12">
                    <div class="section">
                        <h5>Amenidades</h5>
                        <%= form.fields_for :amenities do |amenities_form| %>
                            <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">fitness_center</i>
                                    <label for="icon_prefix"><%= amenities_form.label :gym %></label><br>
                                    <%= amenities_form.number_field :gym %>
                                </div>
                            </div>

                            <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">kitchen</i>
                                    <label for="icon_prefix"><%= amenities_form.label :kitchen %></label><br>
                                    <%= amenities_form.number_field :kitchen %>
                                </div>
                            </div>

                           <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">garage</i>
                                    <label for="icon_prefix"><%= amenities_form.label :garage %></label><br>
                                    <%= amenities_form.number_field :garage %>
                                </div>
                            </div>
                        <% end %>
                    </div>
                </div>
            </div>  
        </div>
    </div>

    <div class="section">
        <div class="actions center-align">
            <%= form.submit class:"waves-effect waves-light btn" %>
        </div>
    </div>
<% end %>

如您所见，我必须复制图标，但问题是如果用户留空，则数字不会显示，但图标会显示，所以我只想动态显示图标和便利设施编号。

我会感谢你的帮助！！:D

标签： ruby-on-railsrubyruby-on-rails-5nested-forms

Answer 1

在你的show.html.erb你可以添加条件 - 我已经添加了amenity.gym

 <div class="section">    
    <div class="row">
        <div class="container">
            <div class="col l6">
                <h5>Description</h5>
                <p class="text-justify"><%= @property.description %></p>
            </div>

            <div class="col l6">
                <h5>Amenities</h5>

               <!--Nested icons-->
                <% @property.amenities.each do |amenity|%>
                  <% if amenity.gym.present? %> ----> From Here
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">gym</p>
                            <p class="no-margin-top-bottom"><%= amenity.gym %></p>
                        </div>
                    </div>
                  <% end %> -- Till Here
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">kitchen</p>
                            <p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
                        </div>
                    </div>
                <% end %>   
            </div>
        </div>
    </div>