Filtering Rails output with angular filters - ruby-on-rails

Question

I am kind of new towards implementing rails with angular js.
What I want is I have a listing index page which gives me all the listings using
Listing.all
My page has several filters in it.Lets say I have a filter of gender, so what I needed is when that dropdown changes the page with listings in it should also get refreshed and now only show listings with the selected gender.
Here is what I have done:-
/application.js/
//= require jquery
//= require jquery_ujs
//= require semantic-ui
//= require dropzone
//= require cloudinary
//= require angular
//= require angular-resource
//= require app.js
//= require_tree ./angular
//= require_tree .
/ListingController(rails)/
def index
#listings=Listing.all
end
/index.html.erb/
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing.gender',class:'ui dropdown gender'})%>
<div class="ui divided items" ng-controller="ListingCtrl" ng-init="init( <%= #listings.to_json %> )" ng-repeat="listing in listings | filter:listing.gender">
<div class="item">
<div class="image">
<img src={{listing.photos.first.file_name.url}} class="header"/>
</div>
<div class="content">
<%=link_to '{{listing.title}}','{{listing}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
</span>
</div>
<div class="description">
<p>
<%='{{listing.love_for_pets}}'%>
</p>
</div>
<div class="extra">
<div class="ui teal tag label"><i class="rupee icon"></i><%='{{listing.price}}'%></div>
</div>
</div>
</div>
</div>
/angular/controllers/ListingController.js/
app.controller('ListingCtrl', ['$scope', '$resource', function($scope, $resource) {
$scope.init = (listings)
{
$scope.listings = angular.fromJson(listings)
}
}]);
/app.js/
var app = angular.module("PetForLife", ['ngResource'])
/Gemfile/
gem 'angularjs-rails'
The index page gets loaded but no listings are getting displayed,also no error on the console.
Can someone please help me with this?

Answer 1

So Finally after struggling and lot of google searches,I found the answer,so I am posting it here so that it can help someone.
Here are the changes required:-
<div class="ui page grid">
<div class="column">
<form class="ui form">
<div class="five fields">
<div class="field">
<label>Gender</label>
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing1.gender',class:'ui dropdown gender'})%>
</div>
<div class="field">
<label>Pet</label>
<%=select(:listing,:pet_type,options_for_select([['Dog','Dog',{class:'item'}],['Cat','Cat',{class:'item'}],['Bird','Bird',{class:'item'}]]),{prompt:'Pet'},{:'ng-model'=>'listing1.pet_type',class:'ui dropdown pet_type'})%>
</div>
<div class="field">
<label>Breed</label>
<%=select(:listing,:breed_type,options_for_select(Breed.all.collect{|x| [x.name,x.name,class:'item']}),{prompt:'Breed'},{:'ng-model'=>'listing1.breed_type',class:'ui search dropdown disabled breed_type'})%>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<!--div class="right floated field">
<label style="visibility:hidden;">Search</label>
<div class="ui left labeled icon button filter">
<i class="filter icon"></i>
Reset
</div>
</div-->
</div>
</form>
</div>
</div>
<div class="ui page grid tabmenu">
<div class="ui secondary pointing filter menu">
<!--a class="blue item" data-tab="saved">Saved</a-->
<a class="active green item" data-tab="all">All</a>
<a class="red item" data-tab="favorite">Favorite</a>
<a class="blue item" data-tab="user_listing">Your Listings</a>
</div>
</div>
<div class="ui divided items" ng-controller="ListingController" ng-init="init(<%=#listings.to_json %>)" >
<div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender,'pet_type':listing1.pet_type,'breed_type':listing1.breed_type}:true">
<div class="image">
</div>
<div class="content listing_content">
<i class="right floated large like icon"></i>
<i class="right floated large star icon"></i>
<%=link_to '{{listing.title}}','{{listing.id}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
<%= #date = '{{listing.created_at}}' %>
</span>
</div>
<div class="description">
{{listing.love_for_pets}}
</div>
<div class="extra listing_price">
<div class="right floated ui circular facebook icon button">
<i class="facebook icon"></i>
</div>
<div class="right floated ui circular twitter icon button">
<i class="twitter icon"></i>
</div>
<div class="right floated ui circular google plus icon button">
<i class="google plus icon"></i>
</div>
<div class="ui teal tag label"><i class="rupee icon"></i>{{listing.price}}</div>
</div>
</div>
</div>
</div>
The only change required was creating a separate div for initialisation and a different div for ng-repeat.
Rest all remains the same.
Hope it will help someone.

Answer 2

I am not familiar with rails, but it appears you are trying to pass data to the view through some kind of render engine. Instead, you need to have angular fetch the data with an ajax call (or you could use websockets) and then pass it to the view with angular. You will need to load angular on the page you are using by attaching the ng-app="PetForLife" to the body tag (or html tag)
<html ng-app="PetForLife">
You attach your controller with the ng-controller attribute on the first div tag (or the body tag).
<body ng-controller="ListingCtrl">
You should look at this article, which goes over some different (good and bad) ways to pass data to angular from Ruby:
Pass Rails Data to Angular
Check the 4th method there. You can use an angular service to get the rails data, and then inject that data wherever you need to in your angular app.