表格中嵌套使用ngRepeat

最新推荐文章于 2020-12-02 16:08:23 发布

weixin_34138521

最新推荐文章于 2020-12-02 16:08:23 发布

阅读量364

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000016168926

博客指出在表格中使用嵌套循环时，后面的循环无效果，而单数使用嵌套循环时正常。通过查找官方文档，尝试其介绍的另一种用法后成功解决问题，并给出了参考链接和官方参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题产生

原来单数使用ngRepeat的嵌套循环的时候，并没有出现什么问题，直接在一个ngRepeat中在使用另一个ngRepeat就可以了。但是这次在表格中使用ngRepeat的tr中嵌套另一个使用ngRepeat的tr，后面的一个就没有效果了。

<tbody>
    <tr ng-repeat="_parameter in currentEditNonMandatoryInstrumentCheck.nonMandatoryInstrument.parameterList">
        <td>参数: {{_parameter.parameterCategory.name}}</td>
        <td ng-bind="_parameter.measureScale | yunzhiMeasureScaleWithUnit"></td>
        <td ng-bind="_parameter.accuracy | yunzhiAccuracyWithUnit"></td>
        <td>
            <button type="button" class="btn btn-xs btn-info" ng-click="addParameterToCalibratePoint(_parameter)">+</button>
        </td>
        <tr ng-repeat="_addParameter in _parameter.additionalParameterList">
            <td>附加参数：{{_addParameter.additionalParameterCategory.name}}</td>
            <td ng-bind="_addParameter.measureScale | yunzhiMeasureScaleWithUnit"></td>
            <td>--</td>
            <td>--</td>
        </tr>
    </tr>
</tbody>

最后的效果是只有上面的部分：

解决办法

通过查找官方文档，发现ngRepeat的另一种用法：

然后就试一试：

<tbody>
    <tr ng-repeat-start="_parameter in currentEditNonMandatoryInstrumentCheck.nonMandatoryInstrument.parameterList">
        <td>参数: {{_parameter.parameterCategory.name}}</td>
        <td ng-bind="_parameter.measureScale | yunzhiMeasureScaleWithUnit"></td>
        <td ng-bind="_parameter.accuracy | yunzhiAccuracyWithUnit"></td>
        <td>
            <button type="button" class="btn btn-xs btn-info" ng-click="addParameterToCalibratePoint(_parameter)">+</button>
        </td>
        <tr ng-repeat-start="_addParameter in _parameter.additionalParameterList">
            <td>附加参数：{{_addParameter.additionalParameterCategory.name}}</td>
            <td ng-bind="_addParameter.measureScale | yunzhiMeasureScaleWithUnit"></td>
            <td>--</td>
            <td>--</td>
        </tr>
        <tr ng-repeat-end></tr>
        <tr ng-repeat-end></tr>
    </tr>
</tbody>

成功！

参考链接：https://www.itstrike.cn/Quest...

官方参考：https://docs.angularjs.org/ap...