Question

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

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

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

我现在不在我可以编码的地方，但会在我确认时进行验证。只是觉得你可能需要快速回答。

显示条件表行Angular JS

1 个答案: