How to Display Length of Filtered Ng-Repeat Data

Angular get length of filtered ng-repeat

You can create an intermediate variable that will hold the filtered array:

data-ng-repeat="result in filteredResults = (results | filter:filterPrice | filter:filterCarCategories | etc.)"

and then can use:

filteredResults.length

AngularJS - how count filtered objects of ng-repeat

You can achieve that by filtering the eventsData array combined with the search filter then getting the length.

E.g.

{{(eventsData | filter:search:strict | filter:'Critical').length}}
{{(eventsData | filter:search:strict | filter:'Warning').length}}
{{(eventsData | filter:search:strict | filter:'ok').length}}

Here's the JsFiddle link.

Your HTML

<div ng-controller="YourCtrl">
    <input type="text" ng-model="search.description" />
    <br />
    <br />
    <input type="text" ng-model="search.severity" />
    <br />
    <br />
    <input type="text" ng-model="search.duration" />
    <br />
    <br />
    <p>Number of Critical Events: {{(eventsData | filter:search:strict | filter:'Critical').length}}</p>
    <p>Number of Warning Events: {{(eventsData | filter:search:strict | filter:'Warning').length}}</p>
    <p>Number of Ok Events: {{(eventsData | filter:search:strict | filter:'ok').length}}</p>
    <br />

    <div ng-repeat="eventData in eventsData | filter:search:strict">
        <div> {{eventData.severity}} </div>
        <div> {{eventData.description}} </div>
        <div> {{eventData.duration}} </div>
    </div>
</div>

Your JS

'use strict';
var app = angular.module('myApp', []);
app.controller('YourCtrl', ['$scope', function($scope) {

        $scope.eventsData = [
            {
                'severity': 'Critical',
                'description': 'content1',
                'duration': 1
            }, {
                'severity': 'Warning',
                'description': 'content2',
                'duration': 2
            }, {
                'severity': 'ok',
                'description': 'content3',
                'duration': 3
            }, {
                'severity': 'Warning',
                'description': 'content2',
                'duration': 2
            }, {
                'severity': 'ok',
                'description': 'content3',
                'duration': 3
            }
        ];
    }]);

Hope it helps.

How to get total length of filtered data in angularJS when filtering is done using ng-show ?

<li ng-repeat="item in ctrl.filteredReport = (ctrl.updatedData | 
filter:ctrl.filterByQuarter:strict | filter:searchText)"> 

It removes / adds items from the DOM in a blink of an eye, pretty cool.

However, slow with huge data.but ng-show that hides/show elements instead of deleting them, Same result better performance

you can use track by to get index and write custom functions as told by @Alex Toby

<li ng-repeat="item in ctrl.filteredReport = (ctrl.updatedData | 
    filter:ctrl.filterByQuarter:strict | filter:searchText) track by $index"> 

How can I get the length of my filtered ngRepeat array in Angular?

You can use a function to tell the page where to start from.

DEMO

In Angular you already have a built-in function limitTo so we're just adding the startFrom function so it can track it's location the results.

{{(data.length}} will give you the total number of results.
{{(data|filter:searchterm).length}} will give you the number of filtered results.

Updated fiddle.

I would also recommend looking at the example fiddles on Angular's wiki here.

---

Related Topics