嵌套 ng-repeat 的 AngularJS 记录计数答案

【问题标题】：AngularJS record count on nested ng-repeat嵌套 ng-repeat 的 AngularJS 记录计数
【发布时间】：2018-01-26 00:28:09
【问题描述】：

我是 Angular js 初学者，我有一个带有自定义过滤器的两个嵌套 ng-repeat，现在我正在尝试获取显示的订单记录数。它工作正常，但在应用产品过滤器后，它没有按预期工作。例如：如果订单在过滤后没有任何要显示的产品，那么我不希望它与显示的总记录数一起添加。

我的html代码：

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

为了更好地理解，我不希望显示为“未找到产品”的订单数，需要带有产品的订单数。我不知道如何进行才能达到我的期望。需要帮助提前谢谢。

记录数 =（显示的订单数 - 没有产品的订单数）

找到我的小提琴“fiddle”。

【问题讨论】：

对不起，我不太了解您想要实现的目标。当研究没有结果时，您不想显示此Total records found : 3？
不，我想显示有产品的订单数量
您能否提供一个您想要的示例？我还是不太明白，对不起，也许是我的错:(
你能打开我的小提琴吗？
是的，我做到了，我仍然打开它

标签： javascript jquery angularjs arrays json

【解决方案1】：

您可以观察变化，然后在每个产品上调用过滤器productName 来计算总计数，如下所示：

先更改ng-repeat，将过滤后的列表结果存入变量：

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

然后观察变化，循环过滤列表并调用productName检查它是否适用

$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;
        }
      }
    });
  }
});

然后显示总数：

{{totalCount}}

编辑：fiddle

【讨论】：