使用ng-repeat将不同列表渲染到表格不同列时出现重复内容问题

问题原因 #

1. 你在所有数据列的<td>标签内同时调用了getValue和getValue2两个方法输出内容，导致每一列都会同时展示两个列表的元素，这是重复显示的核心原因。
2. getValue2的传参存在语法错误：你写的$index == $1中的$1是未定义变量，传参逻辑完全不符合你的预期。
3. 内层ng-repeat的循环变量定义和实际使用不一致：循环写的是days in dayslist，但传参时仍然使用了未在当前作用域定义的day变量。

修复方案 #

1. 修改HTML代码 #

你需要判断当前列是否为最后一列，仅在最后一列才输出getValue2的结果，修正后代码如下：

<table cellpadding="20" rules="GROUPS" frame="BOX">
  <thead>
    <tr>
      <th>Service</th>
      <th style="width: 100px" ng-repeat="day in dayslist">{{day}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="ls in lslist track by $index" ng-init="lsIndex=$index;">
      <td style="width: 100px" class="xl153">{{ls}}</td>
      <td style="width: 100px" class="xl153" ng-repeat="day in dayslist">
        {{getValue(ls, lsIndex, day, $index)}}
        <!-- 仅最后一列显示listrbsJ2的内容 -->
        <span ng-if="$index == dayslist.length - 1">
          {{getValue2(ls, lsIndex, day, $index)}}
        </span>
      </td>
    </tr>
  </tbody>
</table>

2. 校验JS逻辑 #

建议你额外校验getValue2里的索引计算逻辑，避免出现下标越界的问题：如果lsIndex < resultsJ1.length时，(lsIndex - resultsJ1.length)会得到负数，此时取值会返回undefined，符合你“J2从J1结束后开始显示”的预期，但最好增加边界判断避免潜在报错。

提问优化建议 #

• 直接贴出lslist、dayslist、listrbsJ1、listrbsJ2的样例数据，以及resultsJ1.length这类依赖变量的具体值，无需放外链截图，更方便大家复现问题
• 用markdown表格画出你预期的最终渲染效果，能让大家快速理解需求
• 补充控制台的报错信息（比如你当前代码会报$1 is not defined的错误），能进一步缩小排查范围

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