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

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

clipboard.png

解决办法

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

clipboard.png

然后就试一试:

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

clipboard.png

成功!


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

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

阅读 1.1k

朴世超
个人学习总结与项目实战问题记录
336 声望
20 粉丝
0 条评论
你知道吗?

336 声望
20 粉丝
文章目录
宣传栏