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