显示条件表行Angular JS

Question

我有一个类型为 area 的数组，每个区域包含一个名为 items 的数组，其中包含两种类型：item 和 colourItem。

我需要将这两种类型显示为表格中的行，全部混合在一起。

我已将每个项目包装在一个 div 中，该 div 检查项目类型，然后显示该项目的正确属性（这两种类型具有不同的属性）。

但是，这两个 div 似乎将 <td> 元素添加到行中，即使它们不满足 ng-if 条件。所以表格的列太多了。

如何检查每一行的类型并显示该类型的正确属性？它们需要混合在一起，而不是先显示一种类型，然后再显示另一种类型。

代码：

<table>
    <thead>
        <tr>
            <td width="94"></td>
            <td>Cost Type</td>
            <td>Code</td>
            <td>Product</td>
            <td>Options</td>
            <td>Quantity</td>
            <td>Amount</td>
            <td>Supplier</td>
            <td></td>
        </tr>
    </thead>
    <tbody dnd-list="area.items"
           dnd-disable-if="$ctrl.performingSave"
           dnd-allowed-types="['theItemType']"
           dnd-drop="$ctrl.specTplItemDropped(index, item, external, type, area)">
        <tr ng-repeat="theItem in area.items"
            dnd-draggable="theItem"
            dnd-effect-allowed="move"
            dnd-moved="$ctrl.specTplItemMoved(area,$index)"
            dnd-type="'theItemType'">
            <div ng-if="theItem.product || theItem.offeringId">
                <td>
                    <md-icon ng-show="theItem.product.offeringType == $ctrl.enumBase.enumConstants.PRODUCT_TYPE_BUNDLE">folder</md-icon>
                    <md-icon ng-show="theItem.bundleId">attach_file</md-icon>
                    <md-icon ng-show="theItem.inSpec">style</md-icon>
                    <md-icon ng-show="theItem.hasImage">photo</md-icon>
                </td>
                <td>
                    <cb-enum id="theItem.costType"
                             options="$ctrl.costType"></cb-enum>
                </td>
                <td>{{theItem.product.code}}</td>
                <td>{{theItem.product.name ? theItem.product.name : theItem.productOther}}</td>
                <td>
                    <ul class="inline-list">
                        <li ng-repeat="opt in theItem.options">{{opt.name}}</li>
                    </ul>
                </td>
                <td>{{$ctrl.getQuantity(theItem)}}</td>
                <td ng-if="theItem.costType === $ctrl.enumBase.enumConstants.COST_TYPE_PROVISIONAL">{{theItem.rateSnapshot | currency:"$":2}}</td>
                <td ng-if="theItem.costType !== $ctrl.enumBase.enumConstants.COST_TYPE_PROVISIONAL">-</td>
                <td>
                    {{theItem.supplier.legalName ? theItem.supplier.legalName : "-"}}
                </td>
            </div>
            <div ng-if="theItem.colourItem">
                <td>
                    <md-icon ng-show="theItem.hasImage">format_paint</md-icon>
                </td>
                <td>-</td>
                <td>{{theItem.colourItem.code}}</td>
                <td>{{theItem.colourItem.name}}</td>
                <td>-</td>
                <td>{{$ctrl.getQuantity(theItem)}}</td>
                <td>-</td>
                <td>-</td>
            </div>
            <td class="actions">
                <md-menu>
                    <md-button aria-label="Open phone interactions menu"
                               class="md-icon-button md-raised"
                               ng-click="$mdMenu.open($event)">
                        <md-icon md-menu-origin>more_horiz</md-icon>
                    </md-button>
                    <md-menu-content width="4">
                        <md-menu-item>
                            <md-button ng-click="$ctrl.editProductLine($event, theItem)">
                                <md-icon class="md-menu-align-target">mode_edit</md-icon>
                                Edit Item
                            </md-button>
                        </md-menu-item>
                        <md-menu-item>
                            <md-button ng-disabled="theItem.bundleId"
                                       ng-click="$ctrl.removeProductLine($event, theItem)">
                                <md-icon class="md-menu-align-target">remove_circle</md-icon>
                                Remove Item
                            </md-button>
                        </md-menu-item>
                        <md-menu-item>
                            <md-button ng-click="$ctrl.viewProduct($event, theItem);">
                                <md-icon class="md-menu-align-target">pageview</md-icon>
                                View Item
                            </md-button>
                        </md-menu-item>
                    </md-menu-content>
                </md-menu>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

由于 ng-if 在 ng-repeat 之后得到处理...您可以尝试像这样使用 ng-repeat-start/end：

<table>
   <tr ng-repeat-start="item in area.items" ng-if="theItem.product || theItem.offeringId">
        .....
    </tr>
    <tr ng-repeat-end ng-if="theItem.colourItem">
        ....
     </tr>
</table>

我现在不在我可以编码的地方，但我会验证我什么时候可以。只是想你可能需要一个快速的答案。