嵌套ng-repeat变量使用问题：phase.id显示undefined如何解决

我之前也碰到过类似的嵌套ng-repeat踩坑经历，你的情况大概率是这几个原因导致的，咱们一步步来解决：

1. 先排查基础数据是否正确 #

首先得确认外层循环的phase对象确实包含id属性，有时候后端返回的数据可能没这个字段，或者命名有误（比如写成PhaseId而不是id）。你可以先在外层的<td>里临时打印一下phase.id，看看输出：

<td>{{phase.name}} | 对应ID: {{phase.id}}</td>

如果这里显示的就是undefined，那问题出在数据源上，得先确保vm.phases里的每个项都有合法的id值。

2. 避免在ng-repeat中直接调用函数（关键优化点） #

AngularJS的脏检查机制会频繁执行ng-repeat里的表达式，这意味着getTasksByPhaseId(phase.id)会被反复调用，不仅性能拉胯，还可能在某些digest循环阶段，phase变量还没完全初始化，导致传入undefined。

更稳妥的做法是提前在controller里预处理数据，把每个阶段对应的任务直接绑定到phase对象上：

// 假设这是你的controller代码
vm.phases.forEach(function(phase) {
  // 调用你的getTasksByPhaseId方法，把任务列表挂载到phase上
  phase.tasks = getTasksByPhaseId(phase.id);
});

然后修改HTML，内层循环直接遍历phase.tasks即可：

<tr ng-repeat="phase in vm.phases track by phase.id">
  <td>{{phase.name}}</td>
  <table>
    <tbody>
      <!-- 这里加上track by task.id可以避免重复渲染的问题 -->
      <tr ng-repeat="task in phase.tasks track by task.id">
        <td>{{task.name}}</td>
      </tr>
    </tbody>
  </table>
</tr>

3. 若必须保留函数调用（不推荐） #

如果你因为某些原因一定要在模板里调用函数，可以试试显式指定父作用域的phase（不过这只是临时 workaround，远不如预处理数据靠谱）：

<tr ng-repeat="task in getTasksByPhaseId($parent.phase.id)">

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