使用angularJS组计数进行过滤和分组

时间:2015-09-11 14:27:25

标签: angularjs angular-filters

鉴于以下数据:

[
{"Id": 3, "Name":"Image1.jpg", "AssetType":0, "Grouping": {"GroupingId": 4, "Name":"Other"}},
{"Id": 7, "Name":"Document1.jpg", "AssetType":2, "Grouping": {"GroupingId": 4, "Name":"Other"}},
{"Id": 8, "Name":"Video1.jpg", "AssetType":1, "Grouping": {"GroupingId": 4, "Name":"Other"}},
{"Id": 6, "Name":"Image2.jpg", "AssetType":0, "Grouping": {"GroupingId": 1, "Name":"Facebook"}},
]

我想列出不同的资产类型组,因此我使用了以下ng-repeat:

<div class="group" ng-repeat="asset in assets | filterBy : ['AssetType'] : 0  "
    <b>{{ asset.Grouping.Name}}</b><br />
    {{ asset.Name }}
</div>

这让我得到以下信息:

Other
Image1.jpg
Facebook
Image2.jpg

现在,我想按分组名称进行分组,以测试此资产类型是否只有一个组。如果只有一个,我不会显示分组名称,所以我在ng-repeat语句中添加了一个分组:

<div class="group" ng-repeat="(key, value) in assets | filterBy : ['AssetType'] : 0  | groupBy : 'Grouping.Name' ">
    <b>{{ key }}</b> - {{ numGroups(key) }}<br />
    <div ng-repeat="asset in value ">
        {{ asset.Name }}
    </div>
</div>

但是当我添加一个函数来获取这个过滤组的键数时,我得到了一些意想不到的东西:

Other - 5
Image1.jpg
Facebook - 8
Image2.jpg

numGroups的定义如下:

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

我期待键的长度为2(其他和Facebook),但它看起来像是在迭代数组的所有项目。

在应用过滤器后,有没有办法获得组密钥的计数?

有办法!

解决方案的解决方法如下:

$scope.numGroups = function (map) {
    var count = 0;
    angular.forEach(map, function () { count++; });
    return count;
}

和Html

<div class="group" ng-repeat="(key, value) in images = (assets | filterBy : ['AssetType'] : 0  | groupBy: 'Grouping.Name')  ">
    <div class="groupName" ng-hide="numGroups(images) == 1"><b>{{ key }}</b></div>
    <div ng-repeat="asset in value">
        {{ asset.Name }} - Brand {{ asset.Brand.Name }}
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

在你的函数'numGroups'中你获得'Grouping.Name'字符串的长度,如果你使用它可以修复它:

<div class="group" ng-repeat="(key, value) in grouped = (assets | groupBy : 'Grouping.Name') ">
        <b>{{key}}</b> - {{numGroups(grouped)}} <br />
        <div ng-repeat="asset in value">
            {{ asset.Name}}
        </div>
    </div>

你的noumGroups函数的一个棘手方法:

            $scope.numGroups = function(map){
                                    var count = 0;
                                    angular.forEach(map, function(){
                                        count++;
                                    })
                                    return count;
                                }