AngularJS表格嵌套ng-repeat及XHTML下语法报错问题求助

我来帮你搞定这个AngularJS嵌套表格展示的问题，特别是XHTML环境下ng-repeat-start/ng-repeat-end的语法坑和三层循环的正确实现～

问题核心拆解 #

首先明确你遇到的两个关键问题：

• XHTML严格语法限制：XHTML要求所有属性必须带值，直接写ng-repeat-end会触发语法错误，必须给它赋值（哪怕是空值）。
• 循环嵌套逻辑混乱：原代码的三层ng-repeat层级关系没理清楚，导致Region和Site的对应展示不符合预期。

分步解决方案 #

1. 先搞定XHTML下的ng-repeat语法问题 #

在XHTML中，任何自定义属性（包括AngularJS指令）都不能只写属性名，必须指定属性值。所以把ng-repeat-end改成ng-repeat-end=""就可以解决语法报错，比如：

<tr ng-repeat-start="item in dataList">...</tr>
<tr ng-repeat-end=""></tr>

2. 调整三层ng-repeat的嵌套结构 #

先确认你的数据结构：你定义的siteRegion应该是一个数组，每个元素包含一组Site和Region数据（比如siteRegion = [ {Site: [...], Region: [...]}, ... ]）。根据你要展示的“Region和Site配对”需求，分两种场景给出方案：

场景A：每个Region对应所有Site（交叉展示）

如果要让当前分组下的每个Region都和所有Site配对展示，用ng-repeat-start/ng-repeat-end的正确写法如下：

<table>
  <thead>
    <tr>
      <th>Region</th>
      <th>Site</th>
    </tr>
  </thead>
  <tbody>
    <!-- 第一层：遍历每个siteRegion分组 -->
    <tr ng-repeat-start="regionGroup in siteRegion">
      <!-- 第二层：遍历当前分组的Region -->
      <td ng-repeat-start="region in regionGroup.Region">
        {{region.LABEL}}
      </td>
      <!-- 第三层：遍历当前分组的Site，每个Site对应一行 -->
      <td ng-repeat="site in regionGroup.Site">
        {{site.LABEL}}
      </td>
      <td ng-repeat-end=""></td>
    </tr>
    <tr ng-repeat-end=""></tr>
  </tbody>
</table>

场景B：Region和Site按索引一一配对

如果你的Region数组和Site数组长度相同，且索引对应的是同一组数据，那完全可以不用ng-repeat-start/ng-repeat-end，用更简洁的写法：

<table>
  <thead>
    <tr>
      <th>Region</th>
      <th>Site</th>
    </tr>
  </thead>
  <tbody ng-repeat="regionGroup in siteRegion">
    <tr ng-repeat="(index, site) in regionGroup.Site">
      <td>{{regionGroup.Region[index].LABEL}}</td>
      <td>{{site.LABEL}}</td>
    </tr>
  </tbody>
</table>

这种写法不仅避开了XHTML的语法限制，逻辑也更清晰，推荐优先使用。

3. 优化数据推送代码 #

你的for循环可以用ES6的数组方法简化，代码更简洁易读，还能避免手动索引的错误：

// 推送Site数据，替换原for循环
sitePF.Site = selectedSite.map(siteValue => {
  // 用原生find方法替代自定义的findInJson
  const matchedSite = $scope.sites.find(item => item.VALUE === siteValue);
  return {
    VALUE: siteValue,
    LABEL: matchedSite ? matchedSite.LABEL : '' // 增加空值判断，避免报错
  };
});

// 推送Region数据，替换原for循环
sitePF.Region = response.data.results.map(result => ({
  VALUE: result.VALUE,
  LABEL: result.LABEL
}));

额外小提示 #

如果你的siteRegion不是数组，而是单个包含Site和Region的对象（即只有一组数据），那直接去掉最外层的循环即可：

<table>
  <thead>
    <tr>
      <th>Region</th>
      <th>Site</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(index, site) in siteRegion.Site">
      <td>{{siteRegion.Region[index].LABEL}}</td>
      <td>{{site.LABEL}}</td>
    </tr>
  </tbody>
</table>

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