使用角度過濾器過濾軌道輸出

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

所以最後經過努力和大量的谷歌搜索，我找到了答案，所以我在這裏發佈它，以便它可以幫助某人。

下面是所需的更改： -

<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爲NG-重複。

休息都是一樣的。

希望它能幫助別人。

Answer 2

我對rails並不熟悉，但看起來你正試圖通過某種渲染引擎將數據傳遞給視圖。相反，您需要使用ajax調用角度獲取數據（或者您可以使用websockets），然後使用角度將其傳遞給視圖。您將需要通過附加NG-應用=「PetForLife」 body標籤（或HTML標籤） <html ng-app="PetForLife">

加載您正在使用的頁面上的角度你先用NG-控制器屬性附加控制器div標籤（或身體標籤）。 <body ng-controller="ListingCtrl">

你應該看看這篇文章，它越過了一些不同的（好的和壞的）方式在Ruby中數據傳遞到角： Pass Rails Data to Angular

檢查4方法那裏。您可以使用角度服務獲取導軌數據，然後將數據注入角度應用程序中的任何需要的地方。