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

Question

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

我有 3 个过滤器：

通过输入字段查询过滤器。
通过 select 字段进行排序。
通过 select 字段显示的结果数。

虽然所有 3 个都独立工作，但当第一个已归档时，我在处理第三个时遇到了问题。我希望第 3 个 select 字段中的下拉选项保留初始计数。

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

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

首先，我不知道为什么会这样——因为当您搜索 'moto' 这个词时，这个功能可以正常工作。其次，最好在第三个过滤器中保留初始结果数。

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

我想要的是，当点击第三个字段中的上述任何数字时，它们都仍然存在。例如，当前当我单击“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 但保留初始长度/计数

filter ng-repeat yet preserve initial length / count

javascript

angularjs

angularjs-ng-repeat

angularjs-filter