Angular.js: How to count number of elements in nested ng-repeat

Question

So, the situation I have is I'm looping through a list of JSON objects, which contain a list as an attribute. I have an inner loop repeating on that list attribute. Something along the lines of this:

Number of results: {{count}}

<div ng-repeat="jsonObject in outerList | someFilter" ng-show="innerList.length">
    <h1>{{jsonObject.Name}}</h1><br>
    <div ng-repeat="items in jsonObject.listAttr | someOtherFilter as innerList">
        {{items.data}}<br>
    </div>
    <br>
</div>

The issue I'm facing is finding a way to grab an aggregated count of all the elements across every iteration of the inner repeat. So, if the first jsonObject has 2 things that match the inner filter, and the second jsonObject has 3 things that match the inner filter, we show a count of 5 outside the whole loop (in the count variable above, or something similar).

I've looked into a number of ways to try and get that count, but without any success. One of the wrenches that is thrown into some solutions I've found is that the filters are something that the user can change on the fly (via a search box, for one), so I can't just apply all the filters in the controller at page load and display that. I may start with 5 objects, until the user types something into the search box that drops the number down to 2.

You may be able to do this with using the length of each and adding them together on the alias given to the filtered lists. I have done this for other similar instances with some basic pointers here: angular-tips.com/blog/2014/08/… — user1934587390
– user1934587390, Commented Jun 10, 2016 at 20:16

Toni Villena · Accepted Answer · 2016-06-14 12:29:24Z

2

I think that you want this...

Function in the $scope

$scope.moreOne = function(counter) {
  $scope[counter]++;
}

Each element in jsonObject, this is counted

<div ng-repeat="jsonObject in outerList | someFilter" ng-show="innerList.length">
      <h1>{{jsonObject.Name}}</h1><br>
      <div ng-repeat="items in jsonObject.listAttr | someOtherFilter as innerList" ng-init="moreOne('count')">
          {{items.data}}<br>
      </div>
      <br>
  </div>

Do you see the ng-init?

ng-init="moreOne('count')"

Maybe this solution isn't the best... Saludos! :-)

UPDATE

Ok, you can use watchers to controller the changes of model. If outerList or any (you can define a watcher for any property) changes, the watcher will be triggered. And you only need this code without moreOne function :-)

    $scope.$watch("outerList", function(list) {
      $scope.count = 0;
      for(var i = 0; i < list.length; i++) {
        $scope.count += list[i]['listAttr'].length;
      }
    });

edited Jun 14, 2016 at 12:29

answered Jun 10, 2016 at 20:37

Toni Villena

8401 gold badge15 silver badges19 bronze badges

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

2 Comments

Dominator_101 Over a year ago

I saw solutions similar to this elsewhere, but that won't update dynamically, right? If the list ends up getting updated by filters/etc, it would just keep adding to the count and never reset to 0?

Toni Villena Over a year ago

@Dominator_101, I have updated my answer. I hope help you :-)

Collectives™ on Stack Overflow

Angular.js: How to count number of elements in nested ng-repeat

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related