javascript - AngularJS Trying to find the total length of a filtered array that uses limitTo - Stack Overflow

admin管理员组

文章数量:1344979

So I'm trying to get the total length of a filtered array in AngularJS after I've used LimitTo to keep the app from displaying more than a certain amount of elements at a time. The code is as follows:

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

I'm expecting about 150 total results but I'm keeping it limited to displaying 25 at a time. I want the Results to show the total length of the filtered array rather than just the limited version. Is there angular code to be able to get that without running the filter again?

So I'm trying to get the total length of a filtered array in AngularJS after I've used LimitTo to keep the app from displaying more than a certain amount of elements at a time. The code is as follows:

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

I'm expecting about 150 total results but I'm keeping it limited to displaying 25 at a time. I want the Results to show the total length of the filtered array rather than just the limited version. Is there angular code to be able to get that without running the filter again?

• javascript
• angularjs
• filter

Share Improve this question Follow asked Jan 25, 2014 at 19:44 user3235995user3235995 4311 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You're allowed to create a new variable on-the-fly, right inside the ng-repeat expression. This new variable can hold a reference to filtered results and it can be used outside of 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>

This way the filtering loop will run only once.

Unfortunately there is no way to avoid running the filter twice without writing some javascript to assign the result of the filter to a variable.

So, one solution would be to run the selectedTag filter in your controller whenever your array changes, store that locally and use it in your view.

Add this code to your controller:

.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);
    });
}

And in your view:

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

References - http://docs.angularjs/api/ng.filter:filter

本文标签： javascriptAngularJS Trying to find the total length of a filtered array that uses limitToStack Overflow