javascript – 在ng-repeat中的另一行的特定索引处插入行

2023年3月29日 185次阅读

这是代码：

<tr ng-repeat="param in tags[$index].parameters">
            <td class="previewParamName">{{param.name}}</td>
            <td>
                <div ng-if="is_array(param)">
                    <div class="previewParamValue limitWidth">List <span class="arrayParamArrow" ng-click="showArrayParams(param)" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span></div>
                </div>
                <div ng-if="!is_array(param)">
                    <div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
                </div>
            </td>
</tr>
<tr ng-hide="!arrayCollapsed" ng-repeat="params in arrayParameter">
      <td>{{params.name}}</td>
      <td class="wordBreak">{{params.value}}</td>
</tr>

我想要的是能够在第一个ng-repeat中的特定行下面放置第二行ng-repeat,特别是当显示ng-if = is_array(param)div时,因为它表明需要有更多的子行那一个特定的行.谢谢

最佳答案 我不确定你的数组的确切结构是什么,以及如何在点击时获得行的参数.但要渲染它,您应该尝试使用ngRepeatStart和ngRepeatEnd指令.

像这样的东西(为演示简化了一点)：

<tr ng-repeat-start="param in tags.parameters" ng-init="param.arrayCollapsed = false">
    <td class="previewParamName">{{param.name}}</td>
    <td>
        <div ng-if="is_array(param)">
            <div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
                List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
            </div>
        </div>
        <div ng-if="!is_array(param)">
            <div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
        </div>
    </td>
</tr>
<tr ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
    <td>{{p.name}}</td>
    <td class="wordBreak">{{p.value}}</td>
</tr>
<tr ng-repeat-end></tr>

从这里你应该能够为你的代码调整它.

演示：http://plnkr.co/edit/tW3rUYXqoM9fTNHdOf9K?p=info

UPD：更好的解决方案

原始代码包含的问题是,每次迭代都会重复ngRepeatEnd tr,从而产生一堆不必要的空tr.不好.

下面是使用两个中继器的更直接的解决方案：一个在tbody上,第二个在内部tr上.多个tbodies是完全有效的,参数行与其父行组合在同一个tbody中甚至感觉很好.

<table class="table table-bordered table-condensed">
    <tbody ng-repeat="param in tags.parameters" ng-init="param.arrayCollapsed = false">
        <tr>
            <td class="previewParamName">{{param.name}}</td>
            <td>
                <div ng-if="is_array(param)">
                    <div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
                        List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
                    </div>
                </div>
                <div ng-if="!is_array(param)">
                    <div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
                </div>
            </td>
        </tr>
        <tr ng-if="is_array(param)" ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
            <td>{{p.name}}</td>
            <td class="wordBreak">{{p.value}}</td>
        </tr>
    </tbody>
</table>

演示：http://plnkr.co/edit/0V1hDOpl2wukKFeIZC1O?p=info

点赞