AngularJS record count on nested ng-repeat

Question

I am angular js beginner, I have a two nested ng-repeat with custom filter, now I am trying to get the record count of Orders shown. It is working fine but after applying product filter it is not working as expected. For example : If order doesn't have any product to display after filtering then I don't want it to be added with my total record count shown.

My html code:

    <ul ng-repeat="order in Orders | filter:orderName as recordCount">
      Order Id: <b>{{order.orderName}}</b>
      <li ng-repeat="product in order.products | filter:productName as prodCount">
        <b>Name</b> : {{product.name}}, <b>Price</b>: {{product.price}}
      </li>
      <li ng-if="prodCount < 1">No Product found</li>
      <br/>
    </ul>

For better understanding I don't want the count of Order which shows as " No Product found ", needed count of Order with products. I don't know how to proceed in order to achieve my expectation. Help needed thanks in advance.

Record count = (Number Orders shown - Number Orders with No product)

Find my fiddle " fiddle ".

Answer 1

You could watch for change, then call the filter productName on each product to calculate the total count, something like this:

First change ng-repeat to store the results of the filtered list into a variable:

<ul ng-repeat="order in ($parent.filteredOrders = (Orders | filter:orderName))">

Then watch for changes, loop through the filtered list and call productName to check if it applies

$scope.$watch(function() {
  $scope.totalCount = 0;

  if ($scope.filteredOrders) {
    $scope.filteredOrders.forEach(function(order) {
      var l = order.products.length;

      for (var i = 0; i < l; i++) {
        if ($scope.productName(order.products[i])) {
          $scope.totalCount++;
          break;
        }
      }
    });
  }
});

And then display the total:

{{totalCount}}

Edit: fiddle