javascript - AngularJS - 在另一个 div 中访问过滤后的数据

Question

我有一个过滤器应用于搜索功能，用户在文本框中键入搜索查询，ng-repeat 中的结果被过滤。我的代码是:

<div class="number-results">xxxxxx results found</div>
    <div ng-repeat="product in products | topProductsSearchFilter:searchData" class='top-product-icon' ng-click="productClicked(product)">
        <img class='top-product-icon-img' ng-src="{{product.thumbnail}}">
        <div class='top-product-icon-title' ng-bind="product.title"></div>
    </div>

如您所见，我在 ng-repeat 中调用了过滤器:topProductsSearchFilter:searchData

searchData 是搜索文本框的 ng-model:

<input ng-model="searchData" type="text"/>

我编写的过滤器生成一个产品类型的 JSON 数组。在 html 中，我想在此 div 中显示过滤器返回的结果数:

<div class="number-results">xxxxxx results found</div>

我的问题是如何最好地访问 ng-repeat div 标记之外的 JSON 数组的长度。

Answer 1

您可以在 ng-repeat 表达式中创建过滤列表/别名并获取其长度:

<div ng-repeat="item in filteredItems = (items | someFilter)">
  {{item}}
</div>
<div>number of results: {{filteredItems.length}} out of {{items.length}}</div>