带有导轨的Angular js过滤器功能不正确

Question

您好，我正在尝试在我的 rails 应用程序中使用角度过滤，但我不知道为什么它的行为方式不正确。

所以我有一个性别下拉选择，我可以在其中过滤我的列表数组。

代码如下：

/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(<%=@listings.to_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>

它正在正确获取所有数据，一切正常，除了过滤器。当我选择女性时，它会给我过滤后的输出，但对于男性，我会得到所有列表。

有人可以帮忙吗？

Answer 1

您获得“男性”的所有结果的原因是，过滤器在使用时会返回部分匹配的结果。要在过滤中获得完全匹配，请将您的 ng-repeat 修改为：

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

这应该严格返回“男性”或“女性”，而不是将 男性 匹配到部分匹配的 fe男性 结果。

查看filter 上的文档，特别是涵盖此选项的参数部分。

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

希望对你有帮助！