AngularJS - 过滤数据时更新.length答案

【问题标题】：AngularJS - Updating .length when filtering dataAngularJS - 过滤数据时更新.length
【发布时间】：2014-08-20 20:40:04
【问题描述】：

我有一个简单的 ng-repeat at 显示一大块数据。

用户可以通过在文本框中输入值来过滤数据。

在页面加载时，我正在为我的 $scope 中的总项目执行 .length。我想要尝试做的是，当用户在文本框中输入一个值时，让这个 .length 更新为找到的结果数：

HTML：

<p>Original Results found: {{ items.length }}</p>

<p>Updated Results found: {{ i.length }}</p>

<br>

<div>
  <ul>
    <li ng-repeat="i in items | filter: searchText | limitTo: limit">{{ i.Title }}</li>
  </ul>
</div>

<br>


<input ng-model="searchText">
<button ng-click="performSearch(searchText)">Submit</button>

这是我的 plunker：http://plnkr.co/edit/B0gHuI3z8XUsTidXrl4V?p=preview

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

您可以将过滤后的数组存储在临时数组中

<p>Original Results found: {{ items.length }}</p>

<p>Updated Results found: {{ filteredArray.length }}</p>

<br>

<div>
  <ul>
    <li ng-repeat="i in filteredArray = (items | filter: searchText) | limitTo: limit">              {{ i.Title }}</li>
  </ul>
</div>

<br>


<input ng-model="searchText">
<button ng-click="performSearch(searchText)">Submit</button>

工作的笨蛋：

http://plnkr.co/edit/c5Rg8v45Z6TYV19Ss0Fx?p=preview

【讨论】：

【解决方案2】：

您可以创建一个输出数组长度的过滤器，如下所示：

app.filter('arrayLength', function() {
  return function (input) {
    return input.length;
  };
});

然后像这样使用它来表示项目的数量：

{{ items | filter : searchText | arrayLength }}

工作的笨蛋：

http://plnkr.co/edit/N5IWaJXdsMOfzIzlksiC?p=preview

【讨论】：

现在我看到了 Ralph 的回答，我认为这更好，因为他不像我那样进行两次过滤。

【解决方案3】：

从 angular 1.3.0 开始，任何过滤器的结果都可以发布回范围......使用“as”选项

<p>Original Results found: {{ items.length }}</p>

<p>Updated Results found: {{ results.length }}</p>

<br>

<div>
  <ul>
    <li ng-repeat="i in items | filter: searchText as results">{{ i.Title }}</li>
</ul>
</div>

【讨论】：