AngularJS - как считать отфильтрованные объекты ng-repeat

Question

AngularJS - как считать отфильтрованные объекты ng-repeat

0

Я работаю на странице событий со многими фильтрами. Пользователь может отфильтровывать события по степени тяжести, описанию и продолжительности. Уровни серьезности событий могут быть "критическими", "предупреждающими", "хорошими". Может ли кто-нибудь показать мне, как подсчитывать количество фильтрованных событий с каждой серьезностью?. Я ожидаю чего-то подобного

Количество критических событий: 4

Количество предупреждающих событий: 7

Количество событий Ok: 2

Когда число фильтрованных событий изменится, эти числа соответственно изменятся. Большое спасибо.

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>

CuriousHenry 30 июнь 2015, в 03:17

Источник

Теги:

angularjs

filter

counter

ng-repeat

1 ответ

Ещё вопросы

Alberto I.N.J. · Accepted Answer · 2015-06-29T23-36-00.000Z

Вы можете добиться этого путем фильтрации массива eventsData в сочетании с фильтром поиска, а затем получения длины.

Например

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

Здесь ссылка JsFiddle.

Ваш 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>

Ваш 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
            }
        ];
    }]);

Надеюсь, поможет.

Изумительное решение !!! Огромное спасибо. :)