AngularJS - how count filtered objects of ng-repeat

Question

I am working an event page with many filters. User can filter out events by severity, description, and duration. Severity levels of events can be 'critical', 'warning', 'ok'. Can anyone show me how to count the number of filtered events with each severity?. I expect something like this

Number of Critical Events: 4

Number of Warning Event: 7

Number of Ok Event: 2

When the number of filtered events change, these numbers will change accordingly. Thank you very much.

Json

{
   'severity': 'Critical',
   'description': 'content1',
   'duration': 1
}
{
   'severity': 'Warning',
   'description': 'content2',
   'duration': 2
}
{
   'severity': 'ok',
   'description': 'content3'
   'duration': 3
}

HTML

<input type='text' ng-model='search.description'>
<input type='text' ng-model='search.severity'>
<input type='text' ng-model='search.duration'>

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

Duplicate of stackoverflow.com/questions/26087509/…

Sanjay
– Sanjay

2015-06-30 01:36:08 +00:00
Commented Jun 30, 2015 at 1:36 — Sanjay
– Sanjay, Commented Jun 30, 2015 at 1:36

Alberto I.N.J. · Accepted Answer · 2015-06-30 01:38:31Z

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.

Collectives™ on Stack Overflow

AngularJS - how count filtered objects of ng-repeat

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related