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

Question

代码如下：

<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 时，因为它表示该特定行需要更多子行。谢谢

Answer 1

我不确定您的数组的确切结构是什么以及您如何在点击时获取行的参数。但是要渲染它，您应该尝试使用 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

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

Insert rows at specific index of another row in ng-repeat

javascript

angularjs

ng-repeat

angularjs-ng-repeat

UPD：更好的解决方案