嵌套 ng-repeat 的 AngularJS 记录计数

Posted 2023-05-08

【中文标题】嵌套 ng-repeat 的 AngularJS 记录计数

【英文标题】：AngularJS record count on nested ng-repeat

【发布时间】：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？

不，我想显示有产品的订单数量

您能否提供一个您想要的示例？我还是不太明白，对不起，也许是我的错:(

你能打开我的小提琴吗？

是的，我做到了，我仍然打开它

【参考方案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