Question

我一直在扩展angularjs网站上的一个演示，以添加更多动态过滤。

我有3个过滤器：

通过输入字段查询过滤器。
通过选择字段订购过滤器。
通过选择字段显示的结果数。

虽然所有3个独立工作但是当第1个被提交时，我遇到第3个问题。我希望第三个选择字段中的下拉选项保留初始计数。

我有以下FIDDLE。在输入字段中输入单词'dell'可得到2个结果，效果很好。

这在第3个过滤器上提供了以下选项。 'ALL'，'1'，'2'。但是，当我尝试在第3个过滤器上选择“1”（仅显示一个结果）时，一切都会消失。

首先，我不知道为什么会这样 - 因为当你搜索“moto”这个词时，这个功能正常。其次，在第3个过滤器中保留结果的初始结果数量会很好。

当我在第一个字段中输入'moto'时，它会显示10个结果，并且第三个字段中仍会显示以下数字。 'ALL'，'1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'10'。

我想要的是，当点击第3个字段中的任何上述数字时，它们仍然存在。目前，当我点击'3'时，只有以下内容显示'ALL'，'1'，'2'，'3'。

代码。

  <div class="form-group">
    <label for="search">Search:</label>
    <input id="search" ng-model="query">
  </div>

  <div class="form-group">
   <label for="sort">Sort by:</label>
   <select id="sort" ng-model="phoneCtrl.orderProp">
     <option value="name">Alphabetical</option>
     <option value="age">Newest</option>
     <option value="-age">Oldest</option>
   </select>
  </div>

  <div class="form-group">
    <label for="show">Show:</label>
    <select id="show" ng-model="phoneCtrl.limitProp">
      <option value="">All</option>
      <option ng-repeat="phone in filtered" value="{{$index+1}}">{{$index+1}}</option>
    </select>
  </div>

  <ul class="phones list-unstyled">
    <li ng-repeat="phone in filtered = (phoneCtrl.phones | limitTo : phoneCtrl.limitProp : begin | filter:query | orderBy:phoneCtrl.orderProp)">
      <article class="phone">
         <h2 class="h3">{{phone.name}}</h2>
         <p>{{phone.snippet}}</p>
      </article>

    </li>
   </ul>

Answer 1

对于限制为多个项目的第三个过滤器，您需要重复phoneCtrl.phones而不是filtered，因为filtered对象会更改，但phoneCtrl.phones赢了“吨。

<option ng-repeat="phone in phoneCtrl.phones" value="{{$index+1}}">{{$index+1}}</option>

要让过滤器协同工作，请将limitTo过滤器移到filtered对象的定义范围之外，否则您的过滤器只会查看n个手机号码。

<li ng-repeat="phone in filtered = (phoneCtrl.phones | filter:query | orderBy:phoneCtrl.orderProp) | limitTo : phoneCtrl.limitProp : begin ">

Updated Fiddle

过滤ng-repeat但保留初始长度/计数

1 个答案: