如何正确使用ng-repeat遍历嵌套对象及多表筛选报错求助

看起来你在使用AngularJS的ng-repeat和smart-table时遇到了几个棘手的问题，我来帮你一步步梳理解决：

1. 先搞定[ngRepeat:iidexp]错误 #

这个错误的核心原因是ng-repeat的遍历目标不是有效的可迭代对象（比如不是数组/对象），或者表达式语法写错了。你可以按下面的步骤排查：

• 确认deptData的类型：在控制器里加几行调试代码，看看数据结构是否符合预期：

  console.log("deptData是否为数组：", Array.isArray($scope.deptData));
  console.log("deptData具体内容：", $scope.deptData);
  

  如果输出显示不是数组，那你需要先把deptData转换成数组格式（比如后台返回的是对象的话，要处理成数组）。

• 检查ng-repeat语法：如果deptData是你给出的[{ dept: "CASHE", data: [...] }, ...]这种数组结构，那遍历表达式应该写成：

  <div ng-repeat="deptItem in deptData">...</div>
  

  别写成ng-repeat="dept in deptData.dept"这种错误格式哦。

2. 获取deptData用于测试 #

要直观验证deptData的内容，除了控制台打印，还可以在页面上临时加一段调试代码：

<!-- 临时显示deptData的完整结构，测试完可以删掉 -->
<pre>{{ deptData | json }}</pre>

这样就能清晰看到所有字段和数据，确认是否和你预期的一致。

3. 实现下拉选择器联动所有循环生成的表格 #

要让一个下拉选择器对所有ng-repeat生成的表格生效，关键是让所有表格共享同一个过滤条件，具体实现如下：

第一步：在控制器中定义过滤逻辑 #

// 假设你的deptData已经正确赋值
$scope.deptData = [
  { dept: "CASHE", data: [{ violation: "迟到", count: 5 }, { violation: "旷工", count: 1 }] },
  { dept: "HR", data: [{ violation: "迟到", count: 2 }, { violation: "早退", count: 3 }] }
];

// 下拉选择器绑定的全局变量
$scope.selectedViolation = "";

// 所有表格共用的过滤函数
$scope.filterTableData = function(row) {
  // 没选条件时显示所有数据
  if (!$scope.selectedViolation) return true;
  // 匹配违规类型（忽略大小写提升用户体验）
  return row.violation.toLowerCase().includes($scope.selectedViolation.toLowerCase());
};

第二步：页面上实现下拉选择器和循环表格 #

<!-- 全局下拉选择器 -->
<select ng-model="selectedViolation">
  <option value="">全部违规类型</option>
  <option value="迟到">迟到</option>
  <option value="旷工">旷工</option>
  <option value="早退">早退</option>
</select>

<!-- 循环生成每个部门的表格 -->
<div ng-repeat="deptItem in deptData">
  <h3>{{ deptItem.dept }} 部门违规统计</h3>
  <!-- 每个表格绑定独立的显示数据，st-safe-src绑定原始数据源 -->
  <table st-table="deptItem.displayedData" st-safe-src="deptItem.data" ng-init="deptItem.displayedData = [].concat(deptItem.data)">
    <thead>
      <tr>
        <th>违规类型</th>
        <th>次数</th>
      </tr>
    </thead>
    <tbody>
      <!-- 应用全局过滤函数 -->
      <tr ng-repeat="row in deptItem.displayedData | filter:filterTableData">
        <td>{{ row.violation }}</td>
        <td>{{ row.count }}</td>
      </tr>
    </tbody>
  </table>
</div>

这里的关键细节：

• 每个表格通过ng-init初始化独立的displayedData，避免多个表格数据互相干扰
• 所有表格共用同一个filter:filterTableData，实现下拉选择器的全局联动

额外注意事项 #

• 确保st-safe-src绑定的是原始数据源，而不是过滤后的数组，这样smart-table才能正确处理数据更新
• 确认deptData在控制器中已经完成赋值（比如从后台接口获取后再赋值给$scope.deptData），避免初始时是undefined导致ng-repeat报错

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