AngularJS试图找到使用limitTo的过滤数组的总长度答案

【问题标题】：AngularJS Trying to find the total length of a filtered array that uses limitToAngularJS试图找到使用limitTo的过滤数组的总长度
【发布时间】：2014-02-16 18:53:45
【问题描述】：

所以在我使用 LimitTo 来防止应用程序一次显示超过一定数量的元素之后，我试图在 AngularJS 中获取过滤数组的总长度。代码如下：

<span>Results: {{filtered.length}}</span>
<li ng-repeat = "element in filtered = (array | filter:selectedTag | limitTo:load.number)">

我预计总共有 150 个结果，但我将其限制为一次显示 25 个。我希望结果显示过滤后的数组的总长度，而不仅仅是有限的版本。是否有角度代码可以在不再次运行过滤器的情况下获得它？

【问题讨论】：

标签： javascript angularjs filter

【解决方案1】：

您可以在ng-repeat 表达式中创建一个新变量on-the-fly。这个新变量可以保存对过滤结果的引用，并且可以在 ng-repeat 之外使用：

PLUNKER DEMO

<div>Total: {{array.length}}</div>
<div>Filtered: {{filtered.length}}</div>

<ul>
  <li ng-repeat="element in (filtered = (array | filter:selectedTag)) | limitTo:load.number">
      {{element}}
  </li>
</ul>

这样过滤循环只会运行一次。

【讨论】：

不错的解决方案。干净多了！

【解决方案2】：

不幸的是，如果不编写一些 javascript 将过滤器的结果分配给变量，就无法避免运行过滤器两次。

因此，一种解决方案是在您的数组更改时在您的控制器中运行 selectedTag 过滤器，将其存储在本地并在您的视图中使用它。

将此代码添加到您的控制器：

.controler($scope, $filter) {
    // Existing code
    $scope.array = ...
    $scope.selectedTag = ...

    // New code
    $scope.filteredArray = [];

    $scope.$watchCollection('array', function (array) {
        $scope.filteredArray = $filter('filter')(array, $scope.selectedTag);
    });
}

在你看来：

<span>Results: {{filteredArray.length}}</span>
<li ng-repeat = "element in filteredArray | limitTo:load.number">

参考资料 - http://docs.angularjs.org/api/ng.filter:filter

【讨论】：

这很完美，但它需要 $scope.$watch('array', function (array) { $scope.filteredArray = $filter('filter')(array, $scope.selectedTag) ; }，真的）;为了工作
我相信$watchCollection 会比深度观察使用更少的 CPU 周期来解决问题 - bennadel.com/blog/…。改为编辑用户的答案。