如何在ng-repeat中过滤嵌套数组零值且不使用ng-if？

我太懂这个问题了！之前也踩过ng-if的坑——它只是把元素从DOM里移除，但ng-repeat的$index还是会把那些零值项算进去，导致和其他视图元素的索引完全对不上。要解决这个问题，核心是让ng-repeat遍历的就是已经过滤掉零值的数组，而不是在渲染后再隐藏。给你两个实用的方案：

方案1：自定义过滤器（灵活适配动态数据） #

写一个专门过滤零值的自定义过滤器，不管数据什么时候变化，都能自动过滤掉零值项：

angular.module('yourApp').filter('excludeZeroValues', function() {
  return function(array) {
    // 先判断是不是数组，避免报错
    if (!angular.isArray(array)) return array;
    // 过滤掉value为0的项，可根据你的数据结构调整判断逻辑
    return array.filter(item => item.value !== 0);
  };
});

然后在ng-repeat里直接用这个过滤器，比如你的嵌套数组结构是分类下包含values数组：

<div ng-repeat="category in categoryList">
  <h4>{{category.name}}</h4>
  <!-- 这里遍历的是过滤后的values数组，$index完全匹配渲染的元素 -->
  <div ng-repeat="item in category.values | excludeZeroValues">
    索引：{{$index}} | 值：{{item.value}}
  </div>
</div>

这样渲染出来的每一项都是非零值，$index不会被隐藏的零值占用，完美和视图元素对应。

方案2：控制器预处理数据（性能更优） #

如果你的数据不会频繁变化，也可以在控制器里提前把零值过滤掉，直接传给视图：

angular.module('yourApp').controller('YourController', function($scope) {
  // 原始嵌套数组
  $scope.originalCategories = [
    { name: 'Asian/Indian', values: [{value: 10}, {value: 0}, {value: 7}] },
    // 其他分类数据...
  ];

  // 预处理：过滤每个分类下的零值项
  $scope.processedCategories = $scope.originalCategories.map(category => ({
    ...category,
    values: category.values.filter(item => item.value !== 0)
  }));
});

视图里直接用处理好的数组：

<div ng-repeat="category in processedCategories">
  <h4>{{category.name}}</h4>
  <div ng-repeat="item in category.values">
    索引：{{$index}} | 值：{{item.value}}
  </div>
</div>

这种方式数据只处理一次，性能更好，适合静态或低频更新的数据场景。

小提示 #

如果你的“零值”还包括null、undefined或者空字符串，可以把过滤条件调整得更宽松，比如：

array.filter(item => item.value && item.value !== 0)

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