如何获取AngularJS过滤器结果元素数量并控制div显隐

首先，你的核心需求是两个：一是当过滤器无匹配项时隐藏整个结果区域，有匹配时显示；二是获取过滤后的元素数量。咱们一步步来解决：

1. 优化过滤逻辑，获取匹配数量 #

你原来的代码里，在ng-repeat中对每个item单独做过滤判断，这会导致重复计算，而且没法直接获取整个列表的匹配总数。更高效的方式是先一次性过滤整个faqs数组，再基于过滤后的结果做后续操作。

方式一：在控制器中处理（推荐，性能更好） #

借助AngularJS的$filter服务和$watch监听搜索框的变化，提前计算好过滤后的数组和数量：

// 记得在控制器中注入$filter服务
app.controller('YourController', function($scope, $filter) {
  // 假设你的faqs数据在这里
  $scope.faqs = [...];

  // 监听搜索关键词的变化，实时更新过滤结果
  $scope.$watch('search', function(newSearchVal) {
    // 过滤faqs数组
    $scope.filteredFaqs = $filter('filter')($scope.faqs, newSearchVal);
    // 获取匹配元素的数量
    $scope.filteredCount = $scope.filteredFaqs.length;
  });
});

方式二：在模板中直接计算（适合简单场景） #

如果不想修改控制器，可以用ng-init在模板里一次性计算过滤结果和数量，不过这种方式在每次digest循环时都会重新计算，性能略差：

<div ng-init="filteredFaqs = faqs | filter: search; filteredCount = filteredFaqs.length">
  <!-- 后续内容用filteredFaqs和filteredCount -->
</div>

2. 控制元素的显示/隐藏 #

基于上面得到的filteredCount，我们可以直接用ng-show或ng-if来控制整个结果区域的显示：

<!-- 当有匹配项时显示整个区域，无匹配则隐藏 -->
<div ng-show="filteredCount > 0">
  <!-- 显示匹配元素的数量 -->
  <p class="text-center txt_color_azul_oscuro tip_fuen_roboto_l txt_sm">elements: {{ filteredCount }}</p>
  
  <!-- 遍历过滤后的结果 -->
  <div class="col-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in filteredFaqs">
    <!-- 这里放你的item内容 -->
    {{ item.title }}
    {{ item.content }}
  </div>
</div>

<!-- 搜索输入框 -->
<input class="field" type="text" ng-model="search" required>

为什么原来的逻辑不对？ #

你之前的ng-show="([item] | filter: search).length"是对每个item单独判断是否匹配搜索关键词，这会导致：

• 每个item都会触发一次过滤计算，重复消耗性能
• 无法统一控制整个结果区域的显示/隐藏，哪怕只有一个item匹配，这个item会显示，但其他不匹配的会隐藏，而顶部的文字会一直显示

现在的方案就解决了这些问题，既统一控制了显示逻辑，又能直接获取匹配数量。

内容的提问来源于stack exchange，提问作者yavg