AngularJS：如何在同一行中使用ng-repeat实现多重循环？

首先得明确：AngularJS不允许在同一个DOM元素上使用多个ng-repeat指令，你原来在<tr>上写两个ng-repeat的写法会直接报错，因为每个ng-repeat都会尝试接管元素的渲染逻辑，两者会冲突。

不过你要的需求完全可以实现，根据你的数据关联方式，有几种不同的解决方案：

情况1：两个数组长度相同，索引一一对应 #

如果liveclaimdata和hxdata的元素是按索引一一配对的（比如第i个liveclaim对应第i个hx数据），那你只需要用一个ng-repeat循环其中一个数组，然后通过$index去取另一个数组的对应元素：

<tr ng-repeat="x in liveclaimdata track by $index" line-height="24px" id="row_{{$index+1}}">
    <!-- 渲染liveclaimdata的列 -->
    <td>{{x.column1}}</td>
    <td>{{x.column2}}</td>
    <td>{{x.column3}}</td>
    <td>&nbsp;</td>
    <!-- 通过$index获取hxdata中对应位置的元素，渲染剩余列 -->
    <td>{{hxdata[$index].hxColumn1}}</td>
    <td>{{hxdata[$index].hxColumn2}}</td>
</tr>

这里的track by $index是为了避免当数组元素有重复时Angular抛出的重复元素错误，如果你的数组元素有唯一标识（比如id），用track by x.id会更稳妥。

情况2：同一行需要循环渲染第二个数组的多个列 #

如果hxdata的每个元素是当前行的一个额外列（比如每行固定显示liveclaim的几个列后，再循环显示hxdata的所有元素作为列），那可以在<tr>内部的<td>上嵌套ng-repeat：

<tr ng-repeat="x in liveclaimdata" line-height="24px" id="row_{{$index+1}}">
    <!-- liveclaimdata的固定列 -->
    <td>{{x.column1}}</td>
    <td>{{x.column2}}</td>
    <td>{{x.column3}}</td>
    <td>&nbsp;</td>
    <!-- 循环hxdata，每个元素对应一个列 -->
    <td ng-repeat="y in hxdata">{{y.column}}</td>
</tr>

更优雅的方案：提前合并数据 #

如果两个数组是强关联的，我更推荐在控制器里先把数据合并成一个数组，这样页面上的逻辑会更清晰，也更容易维护：

// 在你的Angular控制器中处理数据
$scope.combinedData = $scope.liveclaimdata.map((liveItem, index) => {
    // 处理hxdata长度不足的情况，避免报错
    const hxItem = $scope.hxdata[index] || {};
    return {
        live: liveItem,
        hx: hxItem
    };
});

然后页面上直接循环合并后的数组：

<tr ng-repeat="item in combinedData track by $index" line-height="24px" id="row_{{$index+1}}">
    <td>{{item.live.column1}}</td>
    <td>{{item.live.column2}}</td>
    <td>{{item.hx.hxColumn1}}</td>
    <td>{{item.hx.hxColumn2}}</td>
</tr>

这种方式把数据处理逻辑放到了控制器，符合Angular的MVC思想，页面只负责渲染，代码可读性和可维护性都会更好。

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