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>

can you provide a fiddle with your actual results?

Gonzalo.-
– Gonzalo.-

2018-04-26 23:37:28 +00:00
Commented Apr 26, 2018 at 23:37 — Gonzalo.-
– Gonzalo.-, Commented Apr 26, 2018 at 23:37

bri · Accepted Answer · 2018-04-26 23:53:28Z

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.

answered Apr 26, 2018 at 23:53

bri

3,04018 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display conditional table rows Angular JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related