2015-09-11 4 views
0

Учитывая следующие данные:фильтрация и группировка со счетом angularJS группы

[ 
{"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"}}, 
] 

Я хотел перечислить отдельные группы типов активов, так что я использовал следующий нг-повтор:

<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 

Теперь я хотел сгруппировать по имени группировки, чтобы проверить, была ли только одна группа для t его тип активов. Если бы был только один, я не собирался показывать группировку имя, так что я добавил группу, в нг-повторить заявление:

<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), но вместо этого он выглядит как это iterat используя все элементы массива.

Есть ли способ получить количество групповых клавиш после применения фильтра?

Существует способ!

Вот как решение разработаны:

$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

В функции '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; 
           } 
+0

Это возвращает количество элементов под группой. Я ищу количество групповых клавиш после применения фильтра. – Josh

+0

@Josh Я отредактировал ответ, он делает то, что вам нужно, но я надеюсь, что вы могли бы улучшить лучший способ сделать это –

+1

Awesome. Я обновляю свой ответ с помощью фильтров, применяемых для просмотра всеми. – Josh

Смежные вопросы