ransack search when using with angular and rails

Question

I am panning to do ransack search using angular in rails. So I have the below doubt now In a normal rails app which uses ransack we do like below in a form.

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

But how to make this work when using angular? Is there anything specific I need to do instead of the search_form_for, gteq etc when making this form work in angular?

Answer 1

I found that there is nothing specific to angular on this. Just send the params like the way we want it to be recieved in rails app. Just make sure all are send inside a :q for ransack to work. The params in the below code snippet are different than question as I changed my code base and cant find the commit I done for above code. But this is exactly what we should do

$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'
}