表格中嵌套使用ngRepeat

问题产生

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

<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》

解决办法

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

《表格中嵌套使用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>

《表格中嵌套使用ngRepeat》

成功!

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

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

    原文作者:喵先生的进阶之路
    原文地址: https://segmentfault.com/a/1190000016168926
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞