Implementing Multiple Parameter Search in Rails with Angular

I’ve been working on an application that required search capability based on date and text. This feature required taking 3 parameters in the query and returning results that meet all 3 requirements.

The Challenge

Taking search parameters from frontend Angular, passing them to Rails API action, and returning the results back to the browser.

The Options

  • ElasticSearch is a search engine built on Lucene that has very robust search capabilities including full-text search. The search capabilities were more than I needed in my current project stage, so I chose to skip this option.
  • Straight SQL queries in the Rails controller action. For just basic search functionality, I went with this as the fastest and simplest implementation.
  • Following this tutorial using a Filterable module based on scopes and filtering. The tutorial is well written, but I couldn’t get it to work for me.

The Structure

Angular Requirements

For search to work on the Angular side, I needed to update in a few areas: app.js, RideIndexCtrl.js, and the Ride.js service.


I use the StateProvider to navigate from state to state within the application. The returned list of rides will be displayed on the /rides URL, so the state needs to be able to accept the search params. .state() allows you to pass in params as a param (along with url, templateURL, controller)

My search parameters were actually being input on the welcome state, so adding params to the ride state enables the latter to watch out for and receive the parameters.


The controller should run a function before loading the page. In my case, I am calling the search function from the Ride service and passing in the parameters that have been entered in on the browser.

$state and Ride are dependencies in the controller. To access params that are passed in, you need the $state dependency and call $state.params.#{name of param}.

Ride.js (Service)

The code in here communicates with the Rails API via $resource. I wrote a custom search function, but I could have easily used the index function to reach the same GET request.

The search function takes an additional params object to allow passing the params to the Rails API.

Rails Requirements

So far, all the Angular code has just been there for set up to allow the application to receive information that is typed in and pass it along to the API. Rails is where the actual searching action takes place.


My initial index action looked like this:

It checks for the presence of all 3 parameters and then executes a SQL search to find the results. When I went to test this on my Rails server, the function returned no rides even though the Rails console indicated that such a ride definitely existed in the database. According to my logs, the params were being saved and passed through on the Angular side, but Rails could not find the results.

It turns out the problem was related to the params[:date] item. Angular was passing this param as a :datetime -type object, whereas the Rails schema has this param as a :date object. Since the data types are not the same, SQL couldn’t find that parameter in the table, and therefore it returned nothing.

To fix this, I simply had to convert the params[:date] into the right format by using the Ruby .to_date method: params[:date].to_date. This is the final working version of the method

Lessons Learned

  1. Initially, I had a hard time visualizing the flow of data from text field to database. It helped me to draw out a flow chart separated by front-end and back-end and diagram the input/output of data.
  2. How to access params from $state when navigating from one state to another.
  3. Make sure the service that communicates with the API is aware of and will pass the parameters.
  4. Using SQL to execute a search. There are many different options to implement search, but for a basic application, this was the simplest to implement.
  5. Check to make sure the data type of your parameters match up with their type in the database.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.