Count group elements using angular-filter

Question

Is it possible using angular-filter "groupBy" (https://github.com/a8m/angular-filter#groupby) to count the elements in each group to use in a "badge" span (of course without using a a function doing the "manual count")

<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>

Please post some of your code; hopefully in a plunker or jsfiddle, or a code snippet. This way we can more readily see what you are trying to do. And the short answer is, yes, you can use $filter to count groups, but not sure you can get away with it without a manual count. — SoluableNonagon
– SoluableNonagon, Commented Feb 2, 2015 at 15:24
in the sample it show always the same length() directoryResult.length — Robert
– Robert, Commented Feb 2, 2015 at 15:30
You would probably need to do the filtered count on the JS side using $filter('grouptBy')($scope.directoryResult, "TableId") and do count there because directoryResult is the variable before it is filtered. In your HTML angular creates a new local variable which is filtered. — SoluableNonagon
– SoluableNonagon, Commented Feb 2, 2015 at 15:33
Also, please provide the code for the groupBy filter, angular doesn't have one natively. So please show yours. — SoluableNonagon
– SoluableNonagon, Commented Feb 2, 2015 at 16:14
As in my question, the groupBy is provided by the github.com/a8m/angular-filter#groupby component — Robert
– Robert, Commented Feb 2, 2015 at 16:40

Community · Accepted Answer · 2015-02-02 19:17:39Z

8

If you do something like:

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

then result will be the filtered variable. You can check the length of that for the number of groups.

Update:

Here is a plunker with a groupBy filter.
http://plnkr.co/edit/8jB4wSRtKfVmEsTGZtfV?p=preview

I took an existing filter I found (since angular doesn't have a built in one) and added a length property. The results show up properly.

Update 2:
Another plunker:
http://plnkr.co/edit/iwUkIMjvevja7KyfTrFC?p=preview

Since angular-filter doesn't provide a length property, you have to count it yourself with Object.keys

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

JS:

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

Update 3: the result contains an object literal: each property is named "key" and its value is a subgroup of the list. So the running solution is:

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

Update 4 Finally we may get rid completly of the numGroups function, using directly:

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

So your first idea was the good one, I had just to adapt it as my groupBy resturn an object literal containing all the goruped lists.

edited Feb 2, 2015 at 19:17

CommunityBot

11 silver badge

answered Feb 2, 2015 at 15:36

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Robert Over a year ago

I just tested this:<span class="badge">{{result.length}}</span> and doesn't work....

SoluableNonagon Over a year ago

Let me set up a test plunker

SoluableNonagon Over a year ago

@Robert Can you provide a sample JSON?

Robert Over a year ago

here a small sample drive.google.com/file/d/0BzElu5N9SANUc1M5bVMtUlBnbkE/…

SoluableNonagon Over a year ago

@Robert, I updated my answer, you have to look at your groupBy filter to see whether it has a length property, otherwise it won't work. The code I provide in the plunker defines a length property, that's why it works. Aliasing with as result works as well.

|

Collectives™ on Stack Overflow

Count group elements using angular-filter

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related