Фильтрация Выход рельсов с угловыми фильтрами

Question

Я отчасти новичок в реализации рельсов с угловыми js. То, что я хочу, у меня есть индексная страница листинга, который дает мне все списки с помощью

Listing.all 

Моей страница имеет несколько фильтров в it.Lets сказать, у меня есть фильтр пола, так что мне было нужно, когда что выпадающим изменение страницы с листингами в ней также должно быть обновлено и теперь отображать только списки с выбранным полом.

Вот что я сделал: -

/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 (рельсы)/

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> 

/угловые/Контроллеры/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' 

Индексная страница загружается, но списки не отображаются, также нет ошибок на консоли.

Может кто-нибудь, пожалуйста, помогите мне с этим?

Answer 1

Итак, наконец, после битвы и поиска в Google, я нашел ответ, поэтому я размещаю его здесь, чтобы он мог помочь кому-то.

Вот изменения, необходимые: -

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

Единственное изменение требуется было создать отдельный DIV для инициализации и другой DIV для нг-повтора.

Все остальное остается неизменным.

Надеюсь, что это поможет кому-то.

Answer 2

Я не знаком с рельсами, но, похоже, вы пытаетесь передать данные на вид через какой-то механизм рендеринга. Вместо этого вам нужно получить угловую выборку данных с помощью ajax-вызова (или вы можете использовать веб-узлы), а затем передать его в представление с угловым. Вам нужно будет загрузить Угловое на странице, которую вы используете, прилагая нг-приложение = «PetForLife» в тег тела (или HTML тега) <html ng-app="PetForLife">

Вы придаете контроллер с атрибутом нг-контроллера на первом div (или тег body). <body ng-controller="ListingCtrl">

Вы должны смотреть на эту статью, которая идет через несколько разных (хороших и плохих) способы передачи данных в угловой Руби: Pass Rails Data to Angular

Проверьте 4-й метод там. Вы можете использовать угловое обслуживание для получения данных рельсов, а затем вводить эти данные везде, где вам нужно, в вашем угловом приложении.