AngularJS - 如何计算 ng-repeat 的过滤对象答案

【问题标题】：AngularJS - how count filtered objects of ng-repeatAngularJS - 如何计算 ng-repeat 的过滤对象
【发布时间】：2015-06-30 00:36:36
【问题描述】：

我正在处理一个包含许多过滤器的活动页面。用户可以按严重性、描述和持续时间过滤事件。事件的严重性级别可以是“严重”、“警告”、“正常”。谁能告诉我如何计算每个严重性的过滤事件的数量？我期待这样的事情

严重事件数：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>

【问题讨论】：

重复stackoverflow.com/questions/26087509/…

标签： angularjs filter counter ng-repeat

【解决方案1】：

您可以通过过滤 eventsData 数组并结合搜索过滤器 然后获得长度来实现。

例如

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

这是JsFiddle link。

您的 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
            }
        ];
    }]);

希望对你有帮助。

【讨论】：