Counting the total of nested ng-repeats and updating multiple controllers/models in angularjs

Question

In my current project I have a two nested ng-repeats, where the outer ng-repeat provides an argument the inner ng-repeat needs to filter out the data + some additional custom filtering on the controller. I'd like to know what the total filtered count is of the inner nested elements for the whole overview of the dataset.

Consider the following stripped down structure:

<div ng-repeat="division in divisions">
    <!-- some division related stuff like logo, name, ... comes here (header of the division) -->
    <ol>
      <li ng-repeat="member in members | orderBy:['position'] | filter:{divisionabbr:division.abbr} | filter:myCustomFilter"><!-- some member stuff here, like name --></li>
    </ol>
    <!-- some division footer stuff -->
</div>

My question is: how can I get the total number of filtered members and thus displaying on the whole page.

As an extra I'd like to have this count on my controller/scope so that I can communicate it to other controllers.

I've tried the following solutions:

https://stackoverflow.com/a/20900403/341358 (see my comment, this count isn't updating correctly on data reloads/partial dataset refreshes)
https://stackoverflow.com/a/19517533/341358 (doesn't work with nested ng-repeat because of scope issues)

Any suggestions?

Shomz · Accepted Answer · 2014-03-05 14:27:14Z

1

You can create a filtered members object, like:

$scope.filteredMembers = {};

and then populate it like this:

<div ng-repeat="division in divisions">
    <!-- some division related stuff like logo, name, ... comes here (header of the division) -->
    <ol>
      <li ng-repeat="member in filteredMembers[division] = (members | orderBy:['position'] | filter:{divisionabbr:division.abbr} | filter:myCustomFilter)"><!-- some member stuff here, like name --></li>
    </ol>
    <!-- some division footer stuff -->
</div>

After that, just iterate over the filteredMembers and sum their lengths. Because it's in the scope, you'll also have this available in your controller.

There is no easy/native way to do it.

answered Mar 5, 2014 at 14:27

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

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

2 Comments

Shomz Over a year ago

You're welcome! :) @Oledje, if you steal others' ideas (and downvote them), at least have as much dignity to change the variable names...

Goodnickoff Over a year ago

@Shomz If you look closely, you'll see that my approach is completely different from yours (except for the same variable name that was an accident)

Goodnickoff · Accepted Answer · 2014-03-05 14:29:05Z

0

This is the working example:

http://jsfiddle.net/Kb27R/1/

but there not so many filters like in your code.

I used this approach there: ng-repeat="member in filteredMembers = ( members | filter:{divisionabbr:division.abbr})"

answered Mar 5, 2014 at 14:29

Goodnickoff

2,2671 gold badge17 silver badges18 bronze badges

5 Comments

Goodnickoff Over a year ago

I do not understand what a minus? There is a working example with counting the total number of members: jsfiddle.net/Kb27R/4

BoltClock Over a year ago

If all you're doing is constructing a fiddle based on code from another post, you should post it as a comment instead. If you're trying to answer the question, you might want to explain what is happening in your code. Right now, it doesn't look like an answer so much as simply saying "I put your code in a fiddle."

Goodnickoff Over a year ago

@BoltClock I wrote this example is not based on the other. Time difference between our responses about two minutes. At the time of publication, I have not seen this response.

BoltClock Over a year ago

Fair enough - either way I feel your answer could be very much improved. A simple link to jsFiddle isn't much of an answer.

Goodnickoff Over a year ago

Sometimes one link to jsFiddle more useful than 100 lines of text.

Collectives™ on Stack Overflow

Counting the total of nested ng-repeats and updating multiple controllers/models in angularjs

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related