AngularJS中ng-repeat结合自定义过滤器实现行显示控制

没问题，我来帮你搞定这个需求！我们可以通过自定义一个AngularJS过滤器，轻松实现只渲染包含subArray属性的数组元素。下面是具体步骤：

1. 创建自定义过滤器 #

在你的AngularJS模块中定义一个名为hasSubArray的过滤器，它的作用是过滤掉不包含有效subArray的元素：

angular.module('yourAppModule') // 替换成你实际的模块名
.filter('hasSubArray', function() {
  return function(items) {
    // 先处理非数组输入，避免控制台报错
    if (!angular.isArray(items)) {
      return items;
    }
    
    // 过滤逻辑：只保留存在subArray且为数组类型的元素
    return items.filter(function(item) {
      // 先判断item本身是否存在，再检查subArray是否为数组
      return item && angular.isArray(item.subArray);
    });
  };
});

可选调整： #

如果你只需要判断subArray是否存在（不管它是不是数组），可以把过滤条件改成：

return item && 'subArray' in item;

2. 在ng-repeat中使用过滤器 #

接下来在视图里的ng-repeat指令后加上这个过滤器，就能只渲染符合条件的行了：

<!-- 只渲染包含subArray的元素 -->
<div ng-repeat="item in arrayMain | hasSubArray">
  <!-- 这里放你原来的行内容，比如展示test1、test2和子数组 -->
  <p>test1: {{item.test1}}, test2: {{item.test2}}</p>
  <div>子数组内容：
    <span ng-repeat="subItem in item.subArray">{{subItem}} </span>
  </div>
</div>

这样处理后，arrayMain里那些没有subArray属性的元素就不会被渲染成行了，完全符合你的需求~

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