Display conditional table rows Angular JS

Question

I have an array of type area, and each area contains an array called items which contains two types: item, and colourItem.

I need to display these two types as rows in a table, all mixed together.

I have wrapped each item in a div which checks the item type and then displays the correct properties of that item (the two types have different properties).

However, the two divs seem to add <td> elements to the row even if they do not meet the ng-if condition. So the table has too many columns.

How do i do a check of the types each row and display the correct properties of that type? They need to be mixed in together, not display all one type, then all the other type.

code:

<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

Since ng-if gets processed after ng-repeat ... you could try using ng-repeat-start/end like so:

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

I'm not at a spot I can code at the moment, but will verify when I am. Just thought you might need a quick answer.