angularjs 在行内重复表行 [英] angularjs repeat table rows inside rows

问题描述

我已经阅读了一些关于这个主题的现有线程，我认为我已经接近了，但我可能需要一些帮助.我正在尝试显示采购订单的行项目.如果行项目数组中的行有inventId=0，我想将有关它的所有信息显示为一行.但是，如果inventId > 0，那么我想在标题"行和其余列中显示itemId、昵称和描述作为类似于跟踪行的普通行.这是我当前的代码，它以在每个矩阵"行上方重复的标题"行结束.

I've read a few existing threads on this topic and I think I'm close but I may need a bit of help. I'm trying to display line items for purchase orders. If the row in line items array has inventId=0 I want to display all the information about it as a single row. If, however, inventId > 0 then I want to display itemId, nickname and description in the "header" row and the rest of the columns as a normal row similar to the tracking row. Here is my current code that ends up with the "header" row repeated above each "matrix" row.

<table id="lineItemsTable"
       class="table table-bordered table-hover table-list scTable">
    <thead>
        <tr>
            <th>@Labels.itemId</th>
            <th>@Labels.nickname</th>
            <th>@Labels.description</th>
            <th>@Labels.ordered</th>
            <th>@Labels.cost</th>
            <th>@Labels.extension</th>
            <th>@Labels.price</th>
            <th>@Labels.margin</th>
            <th>@Labels.receiveLocation</th>
            <th>@Labels.received</th>
            <th>@Labels.remaining</th>
            <th>@Labels.vendorPartNo</th>
            <th>@Labels.upc</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat-start="result in crud.model.lineItems track by $index"
            ng-click="crud.selectedIndex=$index;"
            ng-class="{selected: $index === crud.selectedIndex}">
            <td>{{result.itemId}}</td>
            <td>{{result.item}}</td>
            <td>{{result.itemDescrip}}</td>
        </tr>
        <tr ng-repeat-end ng-if="result.inventId!==0">
            <td></td><td></td><td>{{result.inventoryDescrip}}</td>
        </tr>
    </tbody>
</table>

我附上了我想要使用 lineItem 数组实现的目标的屏幕截图:

I'm attaching a screen shot of what I want to achieve using an array of lineItems:

推荐答案

把我的问题写下来总是有帮助的.我一贴出来，我想我想出了一个解决方案.我会将 rowNumber 列添加到返回行项目的存储过程中，并且仅当 Rn = 1 时才会显示该信息.

It always helps to put my question in writing. As soon as I posted it, I think I figured out a solution. I'll add rowNumber column into the stored procedure returning line items and will display that info only when Rn = 1.

虽然我无法制作原始的奇数/偶数行背景色，但我让它工作了.现在所有标题"行看起来都是偶数，这可能是一个不错的效果.

I made it work although I could not make the original odd/even rows backcolor. Now all "header" rows look like even, which is probably an OK effect.

这篇关于angularjs 在行内重复表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！