2015-05-02 51 views
1

嗨我想在我的導軌應用程序中使用角度過濾,但我不知道爲什麼它不以正確的方式運行。Angular js過濾器導軌運行不正常

所以我有一個性別下拉選擇我過濾我的列表數組。

這裏是代碼:

/listing.html.erb/

<div class="ui page grid"> 
    <div class="column"> 
    <form class="ui form"> 
     <div class="six 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> 
    </form> 
</div> 
</div> 


<div class="ui divided items" ng-controller="ListingController" ng-init="init(<%[email protected]_json %>)" > 
    <div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender}"> 
    {{listing1.gender}} 
     <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}}','listings/{{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> 

它正確獲取所有的數據,一切工作正常,除了filter.When我選擇女性,它給了我過濾的輸出,但男性我得到所有的清單。

有人可以幫助這個。

回答

0

您得到「男性」所有結果的原因是因爲過濾器在使用時會返回部分匹配結果。爲了您的篩選中得到精確的匹配,修改ng-repeat這樣:

ng-repeat="listing in listings | filter:{gender : listing1.gender : true} 

這應該嚴格返回「男」或「女」,而不是匹配男性到部分匹配FE 男性結果。

查看關於filter的文檔,特別是涵蓋此選項的參數部分。

https://docs.angularjs.org/api/ng/filter/filter

希望它能幫助!

+0

非常感謝Zoran,它完美的工作。正是我所需要的。也可以指導我以正確的方式將我的rails實例變量@listings值傳遞給角度控制器,因爲現在它轉到init函數當我檢查元素的時候,我看到了整個json的列表,我認爲這可能不是正確的做法。所以你可以引導我。 –