Question

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

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

我预计会有大约150个总结果，但我一直只限制显示25个。我希望结果显示已过滤数组的总长度，而不仅仅是限制版本。是否有角度代码可以在不再运行过滤器的情况下获得该代码？

Answer 1

您可以在ng-repeat表达式中创建一个新的变量 on the 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>

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

Answer 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

AngularJS尝试查找使用limitTo的已过滤数组的总长度

2 个答案: