Question

是否可以使用角度过滤器＆＃34; groupBy＆＃34; （https://github.com/a8m/angular-filter#groupby）计算每个组中的元素以用于＆＃34;徽章＆＃34; span（当然不使用函数执行＆＃34;手动计数＆＃34;）

<div class="list-group" ng-repeat="(key, value) in directoryResult | groupBy: 'TableId'">
    <a href="#" class="list-group-item active">
        <span class="glyphicon glyphicon-transport"></span> {{convertTableid(key)}} <span class="badge">{{directoryResult.length}}</span>
    </a>
    <div class="list-group" ng-repeat="item in value">
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-transport"></span> {{item.Text}}
        </a>
    </div>
</div>

Answer 1

如果您执行以下操作：

ng-repeat="(key, value) in directoryResult | groupBy: 'TableId' as result"

然后result将是过滤后的变量。您可以检查组数的长度。

<强>更新

这是一个带有groupBy过滤器的plunker http://plnkr.co/edit/8jB4wSRtKfVmEsTGZtfV?p=preview

我使用了我发现的现有过滤器（因为角度没有内置过滤器）并添加了一个长度属性。结果显示正确。

更新2：
另一个吸烟者：
http://plnkr.co/edit/iwUkIMjvevja7KyfTrFC?p=preview

由于角度过滤器不提供长度属性，因此您必须使用Object.keys

自行计算

<div>Number of groups: {{numGroups(result) }} </div>

JS：

$scope.numGroups = function(input){
    return Object.keys(input).length;
}

更新3： 结果包含一个对象文字：每个属性都被命名为“key”，其值是列表的子组。所以正在运行的解决方案是：

<div>Number of groups: {{numGroups(result[key]) }} </div>

更新4 最后，我们可以直接使用numGroups函数完成：

<div>Number of groups: {{result[key].length}} </div>

所以你的第一个想法是好的，我只需要将它作为我的groupBy进行修改，然后重新设置包含所有goruped列表的对象文字。

使用角度过滤器计算组元素

1 个答案: