AngularJS表格数据绑定问题：如何正确展示嵌套数组中的课程标题

你在处理表格嵌套数组展示时踩了两个典型小坑：一是字段拼写不匹配导致数据无法正确渲染，二是嵌套ng-repeat的数据源没指向当前用户的courses数组。我来帮你一步步搞定：

先修正基础的拼写错误 #

后端返回的用户姓名字段是fullName（驼峰格式），但你代码里写的是customer.fullname（全小写），这会导致姓名无法正常显示，先把这个细节改过来。

场景1：每个用户仅关联1个课程（或只需展示第一个课程标题） #

如果业务逻辑里每个用户最多有一个课程，或者只需要展示第一个课程的标题，可以直接通过数组索引访问，同时加个空值判断避免报错：

<tr ng-repeat="customer in customers">
  <td>{{ customer.fullName }}</td>
  <td>{{ customer.courses && customer.courses.length > 0 ? customer.courses[0].title : '暂无课程' }}</td>
</tr>

这里的customer.courses && ...是为了防止courses为null或undefined时触发AngularJS报错。

场景2：每个用户有多个课程，需展示所有课程标题 #

如果用户可能关联多个课程，要把所有课程标题列在同一个单元格里，你需要在<td>内部嵌套ng-repeat，核心是要指定数据源为当前用户的courses数组（也就是course in customer.courses，而非你之前写的course in courses）：

<tr ng-repeat="customer in customers">
  <td>{{ customer.fullName }}</td>
  <td>
    <!-- 循环每个课程，显示标题，最后一个课程后不添加逗号 -->
    <span ng-repeat="course in customer.courses">
      {{ course.title }}<span ng-if="!$last">, </span>
    </span>
    <!-- 无课程时显示提示文本 -->
    <span ng-if="customer.courses.length === 0">暂无课程</span>
  </td>
</tr>

你之前的嵌套ng-repeat出错，就是因为没加customer.前缀，导致AngularJS去全局作用域找courses数组，所以每个用户行都重复显示了所有课程。

额外小提示 #

• 确保customers数组已经通过GET请求正确加载到AngularJS作用域中（比如在控制器里通过$http.get获取后赋值给$scope.customers）。
• 如果担心页面加载时出现表达式闪烁，可以用ng-bind替代{{ }}，比如<span ng-bind="course.title"></span>。

内容的提问来源于stack exchange，提问作者ray.k