与 angular 和 rails 一起使用时的搜查搜索

Question

我打算在 rails 中使用 angular 进行搜查搜索。所以我现在有以下疑问在一个正常的 rails 应用程序中，我们会像下面的表格一样使用 ransack。

<%= search_form_for @search, url: search_path, id: "listings_search" do |f| %>
      <div class="col-md-2">
        <%= text_field_tag :search, params[:search], placeholder: "Where are you going?", id: "autocomplete-input", class: "form-control" %>
      </div>
      <div class="col-md-2">
        <%= text_field_tag :start_date, params[:start_date],
                           placeholder: "Start Date", class: "form-control" %>
      </div>
      <div class="col-md-2">
        <%= text_field_tag :end_date, params[:end_date],
                           placeholder: "End Date", class: "form-control" %>
      </div>
      <div class="col-md-2">
        <%= f.text_field :price_gteq, placeholder: "Min Price",
                         class: "form-control" %>
      </div>
      <div class="col-md-2">
        <%= f.text_field :price_lteq, placeholder: "Max Price",
                         class: "form-control" %>
      </div>
      <div class="col-md-2">
        <%= f.submit "Search", class: "btn btn-primary btn-md" %>
      </div>
  <% end %>

但是如何在使用 angular 时使它起作用？在 angular 中使用此表单时，我需要做些什么来代替 search_form_for、gteq 等吗？

Answer 1

我发现在这方面angular没有什么特别之处。只需按照我们希望在 rails 应用程序中接收的方式发送参数即可。只需确保所有内容都发送到 :q 内，以便搜查工作。以下代码片段中的参数与问题不同，因为我更改了代码库并且无法找到我为上述代码所做的提交。但这正是我们应该做的

$http({
            url: "/search.json",
     method: "GET",
                params: {
                    latitude: $scope.GeneralFactory.Details.geometry.location.lat(),
                    longitude: $scope.GeneralFactory.Details.geometry.location.lng(),
                    q: { //Here is the ransack parameters
                        base_price_gteq: $scope.base_price,
                        daily_price_lteq: $scope.daily_price
                    },

                },
                paramSerializer: '$httpParamSerializerJQLike'
}

与 angular 和 rails 一起使用时的搜查搜索

ransack search when using with angular and rails

ruby-on-rails

ransack

angularjs